Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html

今天在开发移动端项目中有个需求是手机端预览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>

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: '转发地址', //sitws:true,changeOrigin: true}}},chainWebpack: config => {config.resolve.alias.set('static',resolve('public/static'))}
}

差的就是这段

config.resolve.alias.set('static',resolve('public/static'))

当然你需要把你的static文件夹放到你的public文件夹中，好的，问题解决

Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html相关推荐

解决pdf.js预览pdf不显示签名问题(两条路)
解决pdf.js预览pdf不显示签名问题(两条路) 解决这个问题的方法很有意思,解决这一类问题的思路就是:如何不让pdf.js抛出异常或者警告.[其实乍一看好像和问题本身并不沾边,哈哈] 电子签章不显 ...
vue项目中使用pdf.js预览pdf文件
项目要求需要预览pdf文件,网上找了很久,大多数都是推荐pdf.js,自己先了解了一下,最后决定用pdf.js, 但是发现,在vue中使用这个很少!!!!!所以我就写这一篇帮助一下vue使用pdfjs ...
ElementUI项目使用pdf.js预览pdf文件
最近因为要用Elementui展示pdf文件.查了很多资料,发现vue-pdf还比较初级,不如pdf.js成熟.所以使用的pdf.js. 1.下载pdf.js 点击这里可以[下载]. 2.解压打开e ...
关于使用pdf.js预览pdf的一些问题
手机应用中pdf展示使用非常广泛, 一些pdf由于特殊的内容比如文字.电子签章必须使用复杂的解析器来解析,当使用MultiPdf 这个库加载,会使得包变得非常庞大, 这里我们考虑使用pdf.js 来解 ...
PDF.js 预览pdf文件流预览pdf，及ie浏览器兼容性问题，解决方案！！（开发笔记）
一. 官网下载pdf.js :Getting Started 注意: 这俩包都不支持ie,因为用的是es6,ie解析不出来下完以后引进去.下面为省事找几个市面上常用的方法: 1.文件流转base ...
html 打印预览兼容,vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
vue下使用 pdf.js 预览和打印 PDF文档兼容React
我使用前端开发框架是vue,有一个打印PDF文档的需求. 这个需求最开始是交给后台,但是明显不切实际, 因为后台服务器,根本就无法连接打印机. 所以这个预览加打印文档的需求就交到了前端, 开始我有想过 ...
解决viewer.js预览PDF文件无法展示PDF水印的问题
前言最近在做一个关于pdf文件水印相关的需求. 关于上传文件增加水印的解决在这篇博客<给PDF添加水印工具类(JAVA实现)>已经提供了工具类. 但是在预览上传后已有水印的文件时,发现水 ...
手机端pdf文件预览pdf.js使用方法详解
虽然H5页面可以通过A直接访问html 但可惜的是手机端H5页面这样做就直接变下载了那么想要实现手机端的pdf文件预览就需要用到pdf.js了首先我们访问地址 http://mozilla.g ...

Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html

Vue Cli项目使用PDF.js预览pdf无法访问到viewer.html相关推荐

最新文章

热门文章