记录下PDF文件预览、打印的实现思路（vue-pdf报错）

最新推荐文章于 2024-07-08 11:30:49 发布

火龙百香果

最新推荐文章于 2024-07-08 11:30:49 发布

阅读量209

点赞数

分类专栏：记录遇到的一些难点以及解决思路文章标签： vue elementui javascript Powered by 金山文档

本文链接：https://blog.csdn.net/2302_76361520/article/details/129684770

版权

记录遇到的一些难点以及解决思路专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue-pdf报错

直接上截图-----目前还没想到办法解决这个报错

实现思路

通过内置iframe页签实现预览、打印功能

我这里用到了elementUI、自己拆了两个组件，会牵扯到父子组件通信问题：

子传父：通过子组件ref打标识 this.$refs.标识名获取子组件实例对象，进而调取方法，获取数据

父传子：通过 this.$parent 获取父组件实例对象，进而调取方法，获取数据

这是我的解决思路，插件我是搞不定了，或许有更好的办法，这是我的实现思路，发出来给大家做个参考

最终效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

火龙百香果

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

vue2/3 - vue-pdf报错Cannot read properties of undefined (reading ‘catch‘)详细解决方案，可能正常预览没有问题但就是报错(预览pdf)

高级前端工程师

07-30

1956

vue2，vue3，vue-pdf，预览，报错，预览pdf出现错误，TypeError: Cannot read properties of undefined (reading ‘catch‘)，换了vue-pdf版本依旧报错，还是会有这个错，不影响使用，虽然报错但还是能打开pdf文档，vue中pdf 预览报错，详细解决方案，原因导致出现的这个问题，给他规定指定的版本就可以解决这个问题，vue-pdf报错Cannot read properties，使用vue-pdf插件导致 Cannot，vue-pdf

vue预览pdf vue-pdf 以及使用vue-pdf读取本地文件报错解决方法

weixin_45484574的博客

11-20

1万+

前言需要在页面在线阅读电子书步骤 step1: 安装 npm install --save vue-pdf 因为是在没有网络的内网开发，所以我是在外网安装的，安装好后拷贝了以下四个文件到项目的 node_modules step2：点击翻页需求 template部分 <template> <div class="pdf"> <p class="arrow"> // 上一页 <span @click="changePdfPa

1 条评论您还未登录，请先登录后发表或查看评论

vue+elementUI 打印pdf文件

qq_42897782的博客

12-02

3460

后台管理系统里经常需要打印功能，常见的是打印页面对象，但是打印指定的pdf文件就比较麻烦，这里就实现了，把需要打印的pdf文件放在一个iframe里，然后在子窗口打印用户操作：点击按钮可以触发打印（如下图）效果如下具体代码如下 methods: { // 打印 doPrint() { console.log("触发打印"); let filePath = "/static/JavaScript高级程..

vue + element 实现在线预览pdf并进行打印

hong

09-28

2724

vue + element 实现在线预览pdf并进行打印 element ui 实现在线预览pdf地址并打印百度了看很多文档都说需要安装一些插件之类的问题其实不需要现在大多数的浏览器都支持打印和预览很简单的一句代码实现 1.添加打印按钮 <el-button type="primary" @click="printBtn(scope.$index, scope.row)">打印</el-button > 添加打印事件我的地址是后端生成的直接带过去使用window

【vue】下载打印 pdf （问题总结）- 持续更新ing

最新发布

qq_45852108的博客

07-08

639

【vue】下载打印 pdf （问题总结）- 持续更新ing

vue-pdf报错Cannot read properties of undefined (reading ‘catch‘)“ found in

CCAHSC的博客

07-06

1945

直接把package.json中的 vue-pdf删除添加下面的两行代码然后重新执行npm i 重新跑一边项目就可以了。根本原因就是vue-pdf版本和vue版本不一致。再安装低版本的vue-pdf。先卸载现有的vue-pdf。

element+vue 之预览pdf组件

Jasmin博客

07-22

1546

【代码】element+vue 之预览pdf组件。

vue文件在服务器上乱码,解决vue-pdf查看pdf文件及打印乱码的问题

weixin_40008946的博客

08-12

1732

前言vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题vue-pdf 使用安装npm install --save vue-pdf引入import pdf from "vue-pdf自定义封装pdf预览组件:visible.sync="pdfDialog":close-on-click-modal="false":show-close="false"width="900px"top...

vue使用vue-pdf预览pdf文件，带有换页、缩放、选择功能

wusq的博客

01-17

7960

1.安装 npm install --save vue-pdf 2.在需要用的页面引入 import pdf from 'vue-pdf' 3.带有放大、缩小、换页功能的用例 <template> <div class="page-container"> <div class="main"> <pdf ...

Vue-pdf预览插件-vue-pdf

AnnaF的博客

04-30

1853

应用场景在写H5项目的时候需要预览pdf文件解决方案步骤一：npm install --save vue-pdf 步骤二: 这是template。 <template> <div class="pdf" v-show="fileType === 'pdf'"> <pdf ref="pdf" :src="pdfUrl" ...

VUE学习日记｜vue-pdf打包缺少worker.js导致pdf无法预览

qq_43292438的博客

12-07

3441

项目场景：前端实现pdf在线预览功能，后段返回的pdf是文件流的形式问题描述：前端已通过vue-pdf实现pdf在线预览功能，且本地测试通过，但通过Jenkins打包后部署在测试环境测试时，发现pdf在线预览功能失效，显示白屏，无法正常显示内容，查看控制台报缺少worker.js 404 报错：GET http://XXX.XXX.XXX.com:8090/c52a93e....worker.js 404(Not Found) 关于如何实现pdf在线预览功能可参考我的另外一篇文章????

vue实现在线预览pdf文件和下载（pdf.js）

10-15

主要为大家详细介绍了vue实现在线预览pdf文件和下载，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

vue-pdf预览pdf文件流

01-13

在vue中引入vue-pdf插件预览pdf文件流

vue-pdf遇到 Cannot read properties of undefined (reading ‘catch‘) 解决办法

weixin_48746140的博客

05-10

1277

1.打开node_modules\vue-pdf\src\pdfjsWrapper.js。而在第二段代码中，Promise 的错误处理直接在。：在第一段代码中，Promise 的错误处理使用了。方法来捕获可能发生的错误，并调用。方法调用后使用了链式调用。

Vue3实现pdf本地预览功能

qq_48665028的博客

04-14

2284

Vue3实现pdf预览功能.

vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

葫芦娃y的博客

03-25

2865

vue项目中使用vue-pdf或pdf.Js，实现在页面上预览pdf内容

【Vue】vue中使用pdf，看这篇就够了~