首页 / VUE / 如何在vue项目里面展示 pdf文件
如何在vue项目里面展示 pdf文件
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了如何在vue项目里面展示 pdf文件,小编现在分享给大家,供广大互联网技能从业者学习和参考。文章包含1621字,纯文字阅读大概需要3分钟。
内容图文
![如何在vue项目里面展示 pdf文件](/upload/InfoBanner/zyjiaocheng/1017/a6d59a15779b4319b2fef57b95119c33.jpg)
首先下载 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>
内容总结
以上是互联网集市为您收集整理的如何在vue项目里面展示 pdf文件全部内容,希望文章能够帮你解决如何在vue项目里面展示 pdf文件所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错,欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 gblab@vip.qq.com 举报,一经查实,本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。