h5下载预览pdf,excel

h5下载预览pdf(pdf.js)

1.下载pdf.js

2.预览有两种方式:

方式一：

（1）把文件放到项目根目录

（2）配置文件路径就可以了

window.open('/pdf/web/viewer.html?file='+文件路径)

方式二：渲染在页面里

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>'Hello, world!' example</title>
</head>
<body><h1>'Hello, world!' example</h1>
<div id="test">
</div>
<!--<div id="pop" style="text-align: center;"></div>--><script src="./pdf/build/pdf.js"></script>
<script src="./js/jquery.js"></script><script id="script">// var html = '<canvas id="the-canvas1" style="border: 1px solid black; direction: ltr;"></canvas>';// $('#test').append(html);//// If absolute URL from the remote server is provided, configure the CORS// header on that server.//var url = './wm.pdf';//// The workerSrc property shall be specified.//pdfjsLib.GlobalWorkerOptions.workerSrc ='./pdf/build/pdf.worker.js';//// Asynchronous download PDF//// var loadingTask = pdfjsLib.getDocument(url);// loadingTask.promise.then(function(pdf) {////     // Fetch the first page//     console.log(pdf.numPages)//      var html = '<canvas id="the-canvas1'" style="border: 1px solid black; direction: ltr;"></canvas>';//      $('#test').append(html);//      pdf.getPage(1).then(function(page) {//         var scale = 1.5;//         var viewport = page.getViewport({ scale: scale, });////         ////         // Prepare canvas using PDF page dimensions//         ////         var canvas = document.getElementById('the-canvas1');//         var context = canvas.getContext('2d');//         canvas.height = viewport.height;//         canvas.width = viewport.width;////         ////         // Render PDF page into canvas context//         ////         var renderContext = {//             canvasContext: context,//             viewport: viewport,//         };//         page.render(renderContext);//     });// });var loadingTask = pdfjsLib.getDocument(url);loadingTask.promise.then(function(pdf) {//多页// var shownPageCount = pdf.numPages < 50 ? pdf.numPages : 50;var shownPageCount = pdf.numPages;var getPageAndRender = function (pageNumber) {var html = '<canvas id="the-canvas'+pageNumber+'" style="border: 1px solid black; direction: ltr;"></canvas>';$('#test').append(html);pdf.getPage(pageNumber).then(function(page) {var scale = 1.5;var viewport = page.getViewport({ scale: scale, });var num =pageNumber;var id = 'the-canvas'+num;console.log(num);var canvas = document.getElementById(id);var context = canvas.getContext('2d');canvas.height = viewport.height;canvas.width = viewport.width;var renderContext = {canvasContext: context,viewport: viewport,};var renderTask = page.render(renderContext);// Wait for rendering to finishrenderTask.promise.then(function () {if (pageNumber < shownPageCount) {pageNumber++;getPageAndRender(pageNumber);}})});}getPageAndRender(1);});
</script><hr>
</body>
</html>

3.关于下载，安卓和ios都是引导到外部浏览器下载，在微信内部是不支持的

预览excel

官方使用文档

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=文件链接' width='100%' height='100%' frameborder='1'></iframe>

链接包含中文需要进行URL编码，并且文档必须可在Internet上公开访问

http://view.officeapps.live.com/op/view.aspx?src=<Document Location>

先研究到这里

h5下载预览pdf,excel相关推荐

uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理: (这里以预览PDF文件为示例,在线预览就是查看网络文件) 1. IOS客户端预览PDF文件 IOS客户端预览PDF文件可以通过跳转文件地址实现预览 ...
vue3 - 【完整源码】超详细实现网站 / H5 在线预览 pdf 文件功能，支持缩放、旋转、全屏预览、打印、下载、内容检索、主题色定制、侧边缩略图、页码跳转等等（最好用的pdf预览器，注释详细！）
效果图在 Vue3.js 项目中,实现了快速高效的 pdf 预览器工具组件,附带详细的使用教程与详细的注释,保证一键复制轻松搞定! 详细的注释很容易二次修改,很多实用功能,你也可以自定义界面上的样式 ...
小程序下载预览pdf，文档打不开解决方案
小程序打开pdf,有3种方式 1.webview打开,这里不做赘述 2.文档二进制流打开,参考其他文章 3.今天的重点,wx.downloadFile,wx.openDocument 操作过程中遇到的 ...
h5页面预览pdf文件_H5移动端在线浏览pdf文件，推荐插件TouchPDF
pdf.png 公共的pdf页面可以自己写,调用插件的代码也相对简单: seePDF.html seePDF.js $(function() { //文件服务器的路径 var picDownloadS ...
pc端、h5在线预览pdf，使用pdfjs-dist自定义组件
"pdfjs-dist": "^2.4.456" vue2 <template><div id="cpdf" class= ...
H5打开预览PDF,PPT等文件
实现代码: pdfUrl 写你的文件路径 <iframe :src="'//www.xdocin.com/xdoc?_func=to&_format=html&_cac ...
前端在线预览word,excel,pdf
前端在线预览word,excel,pdf 预览Word 预览pdf 预览Excel 预览Word 微软的在线预览功能,可以预览word.ppt.Excel.PDF 局限: 需要外网能访问文件,如果是只 ...
【Vue实用功能】Vue实现文档在线预览功能，在线预览PDF、Word、Excel、ppt等office文件
文章目录 @[TOC](文章目录) 方法一. Luckysheet 预览方法二. Office Web 查看器(微软的开发接口) 方法三. XDOC文档预览云服务(预览pdf.word.xls.pp ...
IOS 打开预览pdf、ppt、excel、word、tet、rtf、csv格式的文件，微信文件分享
前言:打开预览pdf.ppt.excel.word.tet.rtf.csv格式的文件有两种一方,一种是利用 UIWebView或者WKWebView 来直接打开,另一种就是利用 QLPreviewCo ...

h5下载预览pdf,excel

h5下载预览pdf(pdf.js)

预览excel

官方使用文档

h5下载预览pdf,excel相关推荐

最新文章

热门文章