Vue-pdf报错pdfRender.cancel().catch

本文介绍使用vue-pdf组件进行PDF文件在线预览时遇到的错误:TypeError: undefined is not an object (evaluating 'pdfRender.cancel().catch')。通过分析发现此问题可能由PDF元素未设置宽度引起。解决方案为给PDF元素指定宽度。

使用vue-pdf实现在线预览Pdf文件,首次加载Pdf的时候可能报错:  [Vue warn]: Error in v-on handler: "TypeError: undefined is not an object (evaluating 'pdfRender.cancel().catch')" ... 

更多内容如下图所示:

分析原因:可能是pdf元素没有设定宽度。

解决方案:给pdf元素设定宽度。

          <div ref="pdfBox" class="pdf-box">
            <pdf class="pdf-view"
              :src="pdfSrc"
              :page="pdfPage"
              @num-pages="pdfPageCount = $event"
              @page-loaded="pdfPage = $event" />
          </div>

​​​​​​​

.pdf-view {
  width: 800px;
  height: 600px;
  margin: 0 auto;
}

当使用"import pdf from 'vue-pdf'"时报错的原因可能是因为你没有正确地安装和配置vue-pdf库。请按照以下步骤检查和解决问题: 1. 确保你已经在项目根目录下执行了以下安装命令: ``` npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save ``` 2. 确保你在项目的Vue组件中正确地引入了vue-pdf库,例如: ``` import pdf from 'vue-pdf'; ``` 3. 确保你在Vue组件中正确地注册了vue-pdf组件,例如: ``` components: { pdf, }, ``` 4. 请确保你的代码中没有其他语法错误或文件路径错误,特别是在引入和使用vue-pdf库时。 如果你仍然遇到问题,请提供更多的错误信息或代码片段,以便我能更好地帮助你解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [vuepdf预览,报错(Cannot read properties of undefined (reading ‘catch‘))解决](https://blog.csdn.net/m0_68275786/article/details/128100827)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [vue中如何使用vue-pdf及相应报错解决](https://blog.csdn.net/m0_55969466/article/details/126033955)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值