最终效果图![最终效果图](https://i-blog.csdnimg.cn/blog_migrate/31cf12b62b01473e8bf7ee39673ab57e.png)
1、版本环境
一定要用要用 pdfjs-2.4.456-es5-dist.zip
版本的, 记得要下载es5版本的。在github
的releases
中可以找到所有旧版本
下载地址:https://github.com/mozilla/pdf.js/releases/tag/v2.4.456
不要使用其他版本:
尝试过当前最新版本v3.11.174
, 切换 dark 主题无效,且 issue 中对应问题未 closed
尝试过当前最新版本v2
的最后一个版本, 图标白色异常显示。
请使用v2.4
或者v2.5
版本, 默认就是 dark 主题
2、文件读取fetch失败
vue项目中, 将pdfjs 文件放入 static 中直接访问 pdfjs/web/index.html
如下:
const pdfUrl = encodeURIComponent('https://example.com/pdf/file001.pdf')
// a 标签直接访问即可
const href = `pdfjs/web/index.html?file=${pdfUrl}`
如果获取文件失败file origin does not match viewer's
直接注释报错即可:padjs/web/viewer.js
// 源代码
if (origin !== viewerOrigin && protocol !== "blob:") {
throw new Error("file origin does not match viewer's");
}
// 修改后
if (origin !== viewerOrigin && protocol !== "blob:") {
// throw new Error("file origin does not match viewer's");
}
3、语言切换为中文
本地调试demo时候,显示为英文, 怎么调试都没用,报错无法获取到文件pdfjs/web/locale/locale.properties
,所以语言切换失败了。
尝试了网上说的修改后缀 .txt 的方法, 没有生效
但是部署上阿里云服务器之后,就自动识别成了中文,所以就放着没管了。
4、修改自动缩放
打开pdf文件之后, 页面宽度不是 A4 的page宽度, 而是铺满屏幕 1920px
因此自动设置为 自动纸张大小 page-width
直接注释报错即可:padjs/web/viewer.js
// 原始值
// var DEFAULT_SCALE_VALUE = "auto";
// 纸张大小
var DEFAULT_SCALE_VALUE = "page-actual";