Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html首先该项目为Vue Cli脚手架构建的项目所以没有常见的静态资源包static,所以我在src平级新建了static文件夹,但是发现并不能访问到viewer.htmlpdf.js下载地址:pdf.js
·
今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html
首先该项目为Vue Cli脚手架构建的项目所以没有常见的静态资源包static,所以我在src平级新建了static文件夹,但是发现并不能访问到viewer.html
pdf.js下载地址:pdf.js下载地址
下载后解压复制到static
页面:
<iframe :src="src" width="100%" height="97%" frameborder="0">
</iframe>
js
data() {
return {
src: "", // pdf文件地址
viewerUrl: '/static/js/pdf/web/viewer.html',
// 要访问的pdf的路径
fileUrl: 'http://47.101.183.8:8088/test.pdf',
}
},
methods: {
getSrc(src){
getPicUrl({ fileKey: src }).then(res => {
if (res.data.code === 200) {
this.src=`${this.viewerUrl}?file=${encodeURIComponent(res.data.picUrl)}`
}
})
},
然后我发现运行之后并没有出现pdf预览的样子
所以应该是/static/js/pdf/web/viewer.html这文件没有访问到
和我之前代码做比较发现估计是静态资源包引入有问题,话不多说上方法,
修改vue.config.js
module.exports = {
devServer: {
proxy: {
'/poros-web/*': {
target: '转发地址', //sit
ws:true,
changeOrigin: true
}
}
},
chainWebpack: config => {
config.resolve.alias.set('static',resolve('public/static'))
}
}
差的就是这段
config.resolve.alias.set('static',resolve('public/static'))
当然你需要把你的static文件夹放到你的public文件夹中,好的,问题解决
更多推荐
已为社区贡献1条内容
所有评论(0)