今天在开发移动端项目中有个需求是手机端预览pdf,ios可以直接在浏览器预览,安卓不行,所以使用pdf.js来解决,之前项目用过该插件很好用,但是今天使用的时候发现根本没有访问到viewer.html
首先该项目为Vue Cli脚手架构建的项目所以没有常见的静态资源包static,所以我在src平级新建了static文件夹,但是发现并s述不能访问到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文件夹中,好的,问题解决在这里插入图片描述

Logo

前往低代码交流专区

更多推荐