vue2中使用vue-pdf插件预览pdf实现及问题总结

1|0前言

  • 首先说明vue3不支持vue-pdf,vue3项目用pdfjs-dist

2|0实现步骤

  • 安装
npm i -s vue-pdf
  • 引入组件
import pdf from 'vue-pdf' export default { name: 'App', components: { pdf }, ··· }
  • html中使用组件
    • 单页
    <pdf :src="file"></pdf>
    • 多页
    <pdf v-for="i in pageNum" :key="i" :src="file" :page="i"></pdf>
  • 数据处理
    • 单页
    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() } }

3|0问题总结

  • pdf文件定位
    • 如果是请求后台文件,注意跨域问题,pdf文件的跨域问题在前端配置是不能解决的,请后台同事解决
    • 如果是链接文件,直接将file改成url就行了
    • 如果是本地文件,需要将所有pdf文件放到public文件夹下,如上文代码中我写的/pdf/test.pdf就是放在public/pdf文件夹下的pdf文件,/路径直接就是public路径。注意不能放在其他地方,也不能用require的方式加载,这些我都试过。
  • file-loader
    • 默认情况vue项目是不识别pdf文件的,所以我们还需要再webpack配置里新增一个rule,不然的话虽然页面不会报错,但是在控制台会有一个warning:Warning: Indexing all PDF objects,然后页面空白,pdf文件无法解析和渲染。
    • 首先安装file-loader,npm i -s file-loader
    • 然后修改vue.config.js
    module.exports = defineConfig({ ··· configureWebpack: { module: { rules: [ { test: /\.(png|jpe?g|gif|pdf)$/i, loader: 'file-loader', options: { name: '[path][name].[ext]', }, }, ], } } })

__EOF__

本文作者Mizuki
本文链接https://www.cnblogs.com/mizuki-vone/p/16379069.html
关于博主:评论和私信会在第一时间回复。或者直接私信我。
版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
声援博主:如果您觉得文章对您有帮助,可以点击文章右下角推荐一下。您的鼓励是博主的最大动力!
posted @   Mizuki-Vone  阅读(10910)  评论(3编辑  收藏  举报
相关博文:
阅读排行:
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示