h5下载预览pdf,excel

最新推荐文章于 2024-08-13 15:21:49 发布

wjp@001

最新推荐文章于 2024-08-13 15:21:49 发布

阅读量2.3k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_29058883/article/details/103737189

版权

前端专栏收录该内容

27 篇文章 1 订阅

订阅专栏

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 finish
                renderTask.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>

先研究到这里

wjp@001

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录