admin管理员组文章数量:1122855
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='.aspx?src=文件链接' width='100%' height='100%' frameborder='1'></iframe>链接包含中文需要进行URL编码，并且文档必须可在Internet上公开访问
.aspx?src=<Document Location>
先研究到这里
版权声明：本文标题：h5下载预览pdf,excel 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/biancheng/1702137365a544108.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论