您现在的位置是：网站首页> 编程资料编程资料

vue中使用vue-pdf组件实现文件预览及相应报错解决_vue.js_

2023-05-24 395人已围观

简介 vue中使用vue-pdf组件实现文件预览及相应报错解决_vue.js_

前言

使用vue-pdf组件实现文件预览功能 并在文件上增加操作按钮vue3不支持vue-pdf，vue3项目用pdfjs-dist

一、安装npm 依赖

1、在根目录下输入一下命令

npm i pdfjs-dist@2.5.207 --save npm i vue-pdf@4.2.0 --save

2、修改pacakge.json文件 

"dependencies": { "pdfjs-dist": "2.5.207", "vue-pdf": "4.2.0", },

二、引入组件

import pdf from 'vue-pdf' export default { name: 'App', components: { pdf }, ··· }

1、html中使用组件 单页

多页 

2、数据处理 单页

export default { ··· data () { return { file: "/pdf/test.pdf" } } }

多页 

export default { ··· data () { return { file: "/pdf/test.pdf", pageNum: 1 } }, methods: { getPageNum () { let loadingTask = pdf.createLoadingTask(this.file) loadingTask.promise.then(pdf => { this.pageNum = pdf.numPages }).catch(err => { console.error('pdf加载失败', err); }) } }, mounted () { this.getPageNum() } }

三、项目使用--代码部分

四、报错解决

1、这种情况就是跨域了找后台解决一下即可

2、 这种情况是pdf还没加载出来就去渲染导致页面pageNum找不到，调用接口加载完成后再去渲染pageNum

3、报这个错误加上  {withCredentials: false} ，报错就没有了

补充：vue使用vue-pdf预览开发正常，打包报错work.js404

修改依赖文件node_modules下worker-loader里的index.js文件里路径
代码如下（示例）：

 const filename = _loaderUtils2.default.interpolateName(this, options.name || 'static/js/[hash].worker.js', { context: options.context || this.rootContext || this.options.context, regExp: options.regExp });

总结

到此这篇关于vue中使用vue-pdf组件实现文件预览及相应报错解决的文章就介绍到这了,更多相关vue vue-pdf实现文件预览内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：JavaScript中将字符串转换为数字的七种方法总结_javascript技巧_

下一篇：vue3使用自定义指令实现el dialog拖拽功能示例详解_vue.js_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网