vue 实现手机端显示pdf

最新推荐文章于 2024-06-19 09:54:07 发布

LGDmar

最新推荐文章于 2024-06-19 09:54:07 发布

阅读量635

点赞数

本文链接：https://blog.csdn.net/LGDmar/article/details/111830539

版权

废话不多说直接上代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
</head>
<body>
    <div id="content">
        <canvas v-for="item in totalPage" :key="item" :ref='"the-canvas" + item' style="width: 100%;height: auto"></canvas>
    </div>
</body>
<script src="../js/vue.js"></script>
<script src="../js/pdf.js"></script>
<script src="../js/pdf.worker.js"></script>
<script>
    var vim = new Vue({
        el:"#content",
        data:{
            totalPage:1
        },
        mounted(){
            window.print();
            this.init();
        },
        methods: {
            init(){
                let that = this;
                let winW = document.documentElement.clientWidth;
                
                let loadingTask = pdfjsLib.getDocument('你的pdf路径');
                loadingTask.promise.then(function(pdf) {
                    // pdf页数
                    that.totalPage = pdf.numPages;
                    // 循环页数进行渲染
                    for(let index = 1;index <= pdf.numPages; index++){
                        pdf.getPage(index).then(function(page) {
                            var scale = 1;
                            var viewport = page.getViewport({ scale: scale, });
                            var canvas = that.$refs['the-canvas'+index];
                            var context = canvas[0].getContext('2d');
                            canvas[0].height = viewport.height;
                            canvas[0].width = viewport.width;
                            var renderContext = {
                                canvasContext: context,
                                viewport: viewport
                            };
                            page.render(renderContext);
                        });
                    }
                });
            }
        }
    });
</script>
</html>

js demo下载路径https://download.csdn.net/download/LGDmar/13944653

LGDmar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue 实现手机端显示pdf

废话不多说直接上代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello world</title></head><body>
复制链接

扫一扫