pdfjs下载地址(下载es5版本)
http://mozilla.github.io/pdf.js/getting_started/#download
文末有我的demo代码,大家有兴趣的话可以下载来看看
<template>
<view>
<web-view :src="url"></web-view>
</view>
</template>
<script>
export default {
data() {
return {
// pdf.js的viewer.html所在路径
// 注意:静态的html文件需要放在根路径下的 hybrid/html 文件夹中
base_url : '/hybrid/html/web/viewer.html',
// 要访问的pdf的路径 file_url
/*
访问的时候会遇到跨域问题
解决方法一、
1. /hybrid/html/web/viewer.js 中注释掉这3行代码
if (origin !== viewerOrigin && protocol !== "blob:") {
throw new Error("file origin does not match viewer's");
}
2. 你存放pdf文件的这个服务器 需要做好跨域配置
例如: 我现在访问的是 8.129.221.250 这个服务器 8.129.221.250 这个服务器是 nginx 服务器
那么 我需要在 nginx 的配置文件中做如下操作
location / {
add_header Access-Control-Allow-Origin '*';
add_header Access-Control-Allow-Methods 'GET, POST, PUT, OPTIONS';
add_header Access-Control-Expose-Headers 'Accept-Ranges, Content-Encoding, Content-Length, Content-Range';
}
解决方法二、后端获取文件流的方式 请各位自行百度吧
*/
file_url: 'http://8.129.221.250/img/1.pdf',// 这个pdf文件比较大,而且我的服务器带宽又小 所以加载pdf的时候会有点慢
// 最终显示在web-view中的路径
url: ''
}
},
onLoad() {
// h5 和 安卓
this.url = `${this.base_url}?file=${encodeURIComponent(this.file_url)}`;
console.log(this.url)
// ios,直接访问pdf所在路径
// this.url = encodeURIComponent(this.file_url);
// 小程序平台 我没有测试过 也不知道可不可行
},
methods: {
}
}
</script>
<style>
</style>
这里有我的demo代码
链接:https://pan.baidu.com/s/1jKvlxWAR5HY4k-cEMqrScw
提取码:abcd
https://www.xiejiahe.com/blog/detail/5be97f71df53a14006035e2a