如何在vue项目里面展示 pdf文件

互联网 2021/4/8 10:08:50

首先下载 pdfjs-dist 这个插件 在然后在 component 里面添加一个 空白的.vue文件 复制下面的代码 注意:url 是在public 里面的 静态资源 访问 public 里面的 资源 不需要跨域<template><div class="canvas-container"><canvas v-for="p…

首先下载  pdfjs-dist 这个插件

在然后在 component 里面添加一个 空白的.vue文件

复制下面的代码

注意:url 是在public 里面的 静态资源  

访问 public 里面的 资源 不需要跨域

<template>
     <div class="canvas-container">
        <canvas v-for="page in pages" :id="'the-canvas'+page" :key="page">
        </canvas>
    </div>
</template>

<script>
import PDFJS from 'pdfjs-dist';
import workerSrc from 'pdfjs-dist/build/pdf.worker.entry'
PDFJS.workerSrc = workerSrc;

export default {
    name: 'Pdf',
    data() {
        return {
            pages: []
        };
    },
    // props:{
    //     str:String,
    // },
    created() {
        let url = "/report.pdf"
       this._loadFile(url);
    },
    methods: {
        _renderPage (num) {
            this.pdfDoc.getPage(num).then((page) => {
                let canvas = document.getElementById('the-canvas' + num)
                var vp = page.getViewport({scale: 1});
                let ctx = canvas.getContext('2d')
                let dpr = window.devicePixelRatio || 1
                let bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio || 1
                let ratio = dpr / bsr
                let viewport = page.getViewport({scale: window.innerWidth / vp.width});
                canvas.width = viewport.width * ratio
                canvas.height = viewport.height * ratio
                canvas.style.width = viewport.width + 'px'
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0)
                let renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                }
                page.render(renderContext)
                if (this.pages > num) {
                    this._renderPage(num + 1)
                }
            })
        },
        _loadFile (url) {
            PDFJS.getDocument(url).promise.then((pdf) => {
                this.pdfDoc = pdf
                this.pages = this.pdfDoc.numPages
                this.$nextTick(() => {
                    this._renderPage(1);
                });
            });
        }
    }
};

</script>

<style lang="scss" scoped>
.canvas-container{
    margin: 0 auto;
    canvas{
        height: 100vh;
    }
}
</style>

 

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[如何在vue项目里面展示 pdf文件]http://www.zyiz.net/tech/detail-153659.html

上一篇:解决vue打包history模式刷新页面404报错 nginx

下一篇:谷歌浏览器安装JSON格式化插件

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程