admin管理员组文章数量:1644030
这是对上一篇的补充 因为篇幅稍微有点多 就不在上一篇上做更新了。
针对上一篇所封装的pdf预览组件,在项目的使用过程中发现了一些问题。如果有使用了类似封装的,遇到问题可以一起讨论。
兼容性
第一个问题就是兼容性的问题(demo使用的pdfjs-dist为4.3.136,pdf-lib为1.17.1)。在较低版本的浏览器上出现了如下报错:
这个报错主要是因为这个Promise.withResolvers
的语法太新了,即使是chrome都需要119以上的版本,也没法强制要求用户更换或者更新浏览器。
当发现这个报错之后走了很多弯路,用babel、@vitejs/plugin-legacy等等去做一些兼容性的处理,但是因为报错代码存在于node_modules当中,这些处理不了,强制去处理又出现了新的问题。
这一切的解决是直到我去看了一下node_modules当中pdfjs-dist的目录,当看到这个的时候已经快被自己蠢哭了。
解决办法如下:
// 兼容版本
import * as workerSrc from "pdfjs-dist/legacy/build/pdf.worker.min?url";
// 原版代码
import * as workerSrc from "pdfjs-dist/build/pdf.worker.min?url";
pdfjs-dist其实已经考虑到了这个问题,只需使用legacy目录下对应的文件即可。
pdf显示不完整
在使用过程中出现了pdf成功显示,但文字显示不完整的情况,控制台会出现如下警告:
大概意思就是字体加载的错误,CMap这个东西的"cMapUrl" 和 “cMapPacked” 不正确。
经过多次尝试之后,在原本代码内进行如下修改即可:
// 增加如下代码
const CMAP_URL = "/cmaps/";
const CMAP_PACKED = true;
// 将原本代码
const loadingTask = pdfjsLib.getDocument(pdfUrl.value);
// 改为
const loadingTask = pdfjsLib.getDocument({
url: pdfUrl.value,
cMapUrl: CMAP_URL,
cMapPacked: CMAP_PACKED,
});
这里特别说明之所以CMAP_URL = "/cmaps/";
,而不是使用CMAP_URL = "node_modules/pdfjs-dist/cmaps/";
。是因为这里使用vite的一个插件,vite-plugin-static-copy
。配置如下:
// vite.config.js
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import { viteStaticCopy } from 'vite-plugin-static-copy';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
viteStaticCopy({
targets: [
{
src: "node_modules/pdfjs-dist/cmaps/*",
dest: "cmaps",
},
],
}),
],
});
进行了该配置后,打包也会将cmaps内的文件进行打包,确保生产环境使用。
以上是目前使用当中遇到的一下问题,如有其他问题可在评论区讨论。组件的基础封装请看上一篇文章。
版权声明:本文标题:基于pdfjs-dist和pdf-lib实现PDF的预览(缩放、下载)(二) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729381695a1199168.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论