vue-pdf vue中导入文件并预览

暂时是导入后根据文件流预览

之后上传后台哪url地址应该就是<pdf :src="url"

创建参考 https://www.cnblogs.com/mizuki-vone/p/16379069.html

多页<pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf></div>import pdf from 'vue-pdf'components: {pdf},file: "/pdf/test.pdf",pageNum: 1,mounted() {this.getPageNum()},methods: {//pdfgetPageNum () {let loadingTask = pdf.createLoadingTask(this.file)loadingTask.promise.then(pdf => {this.pageNum = pdf.numPages}).catch(err => {console.error('pdf加载失败', err);})},

报错 Invalid PDF structure.

写了 /public/xxx.pdf，并不行，还是显示未能加载PDF文档，但是路径好像也没有问题啊，最后才发现，原来写在 /pubilc目录下的文件不需要加上 /public，直接在src中写/xxx.pdf即可

报错：“TypeError:无法读取未定义的财产（读取'catch'）”

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'catch')"

found in

---> <ResizeSensor> at node_modules/vue-resize-sensor/src/resize-sensor.vue
<Pdf> at node_modules/vue-pdf/src/vuePdfNoSss.vue
<HelloWorld> at src/components/HelloWorld.vue

解决方法：

在node_modules中找到vue-pdf，src下的pdfjsWrapper.js。将

if ( pdfRender !== null ) {
if ( canceling )
return;
canceling = true;
pdfRender.cancel().catch(function(err) {
emitEvent('error', err);
});
return;
}
修改为：

if ( pdfRender !== null ) {
if ( canceling )
return;
canceling = true;
pdfRender.cancel();
return;
}

7 typeerror:(0,_schemautils.default) is not a function @./node_modules/css-loader/dist

我在项目里手动加入vue-pdf 产生了这问题

方法1

方法2 我是报error in ./node_modules/element-ui/lib/theme-chalk/fonts/element-icons.woff

syntax Error : typeError:(0,_sc....

我试了试 @./node_modules/css-loader/dist 更新css-loader url-loader...

虽然能运行了，但图片 invalid prop:type check failed for prop "src"Expected String with value "[object Module]",got Module

搜索解决方法，改esModule:false, 但我的问题没解决，暂时搁置，我搞别的去

vue.config.jsloader:'xxx',
options:{esModule:false,
name:'[path][name].[ext]
}

11 pdf

invalid PDF structurn
indexing all PDF objects
Bad FCHECK in flate stream :120,194

第一个有这个代码，报错，如何将它删掉

删掉后报错 indexing all PDF objects
Bad FCHECK in flate stream :120,194

参考第二个看了看区别在let file = new Blob([data],{type:'application/pdf;chartset=utf-8'})

又报 Name token is longer than allowed by the spec:286

反正最后我直接保存的是 Blob （flie) ，没转换了，

应该在以xx格式读取文件获取 result 时发生了错误吧

参考vue-pdf 通过文件流预览pdf文件_vue-pdf 文件流_逩跑鍀小学生的博客-CSDN博客

vue处理PDF文档流数据并实现PDF的预览以及打印功能以及处理PDF打印乱码问题_vue-pdf 文件流_木屋x的博客-CSDN博客

vue-pdf vue中导入文件并预览相关推荐

计算机无法快速预览pdf,电脑中无法使用火狐浏览器预览PDF文档怎么解决
‍ 在火狐浏览器中具有在网页中支持打开PDF文档的功能.有用户在使用Firefox打开PDF文档时却被提示需要保存文件,而不能直接在页面中预览.如果遇到上述的情况,我们应该如何操作才能在火狐浏览器中直 ...
vue 实现pdf文件在线预览
PDF文件在线预览的功能相信大家都是有遇到过的,这边有两种实现方法,大家可以借鉴参考下第一种,使用vue-pdf 安装 npm install --save vue-pdf 页面代码 <tem ...
html如何找寻vue文件,如何预览vue文件
每天写个页面,都要配置脚手架,能不能像以前开发前端页面一样,写一个index.html,然后编写js,css,就可以在浏览器上运行了呢?可是我又不想舍弃vue,那么能不能全局搭建一个脚手架,供我来使用 ...
js-xlsx vue导入excel在线预览
js-xlsx vue导入excel在线预览导入XLSX库官方地址Github 安装 npm install xlsx --s 引入 import XLSX from 'xlsx' HTML &l ...
Windows中PDF TXT Excel Word PPT等Office文件在预览窗格无法预览的终级解决方法大全
切记:以上方法均会对注册表进行修改,一定要先备份整个注册表,以防万一,避免导致系统错误一.问题症状或错误复现: 1.首先要打开文件资源管理器的文件预览窗格 2.然后在文件资源管理器的右边就会显 ...
vue自定义组件实现文件列表预览与下载
由于ant-design-vue自带的a-upload组件与JeecgBoot封装的j-upload组件在查看上传文件列表时都不太满足项目需要,就自定义了文件列表查看组件,主要仿a-upload组件l ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览
关注公众号前端开发博客,领27本电子书回复加群,自助秒进前端群大家好,我是漫步,明天有个抽奖,记得去参与.张鑫旭最新的CSS书,免费送10本前言因为业务需要,很多文件需要在前端实现预览,今天 ...
java将office文档,word,ppt,pdf文档转换成swf文件在线预览
java将office文档pdf文档转换成swf文件在线预览第一步,安装openoffice.org openoffice.org是一套sun的开源office办公套件,能在widows,linux ...

vue-pdf vue中导入文件并预览

vue-pdf vue中导入文件并预览相关推荐

最新文章

热门文章

vue-pdf vue中导入文件 并预览

vue-pdf vue中导入文件 并预览相关推荐

最新文章

热门文章

vue-pdf vue中导入文件并预览

vue-pdf vue中导入文件并预览相关推荐