vue-pdf使用方法和踩坑记录

明明明鸣

于 2023-02-06 11:59:17 发布

阅读量646

点赞数

文章标签： vue.js pdf javascript

本文链接：https://blog.youkuaiyun.com/weixin_45578673/article/details/128898857

版权

文章介绍了在Vue项目中使用vue-pdf插件进行PDF文件预览的方法，包括单页和多页展示。安装插件后，通过组件渲染PDF，数据绑定src属性来指定PDF链接或路径。在多页显示时，需结合v-for循环遍历页码。同时，文章提到了一个常见错误‘windowisnotdefined’，该错误通常由this指向问题引起，解决方案可能涉及修改webpack配置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue-pdf使用方法和踩坑记录

vue中使用vue-pdf插件完成多页pdf文件预览

安装

npm install --save vue-pdf

示例

单页

<pdf   ref="pdf" :src="pdfUrl"> </pdf>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
          pdfUrl:"***.pdf",//pdf链接/路径（本地文件需要放在public或者static中）
      }
  }

多页

<pdf   ref="pdf" v-for="i in numPages.numPages" :key="i" :src="numPages.url" :page="i"> </pdf>
import pdf from 'vue-pdf'
export default {
  name: 'Pdf',
  components:{
      pdf
  },
  data(){
      return {
         numPages:{
                numPages:0,  //页数
                url:null           //pdf路径
        }
      }
  },
  methods:{
	  async handelPdf(item) {
                // 使用本地的pdf文件 (必须放到public(vue-cli 4+)或者static文件里面)
                this.numPages.numPages = await PDFHandle.createLoadingTask(item.url,{withCredentials: false}).promise.then(pdf => {
                    return pdf.numPages
                }).catch(err => {
                    console.error('pdf加载失败', err);
                })
                this.numPages.url =  item.url
        },
      }

踩坑记录

错误
window is not defind
原因
this指向问题
解决方法
修改一下webpack.base.config.js中全局的this指向
在这里插入图片描述
或者 vue.config.js中全局的this指向