基于pdfjs-dist和pdf-lib实现PDF的预览（缩放、下载）(二)

这是对上一篇的补充 因为篇幅稍微有点多 就不在上一篇上做更新了。

针对上一篇所封装的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内的文件进行打包，确保生产环境使用。

以上是目前使用当中遇到的一下问题，如有其他问题可在评论区讨论。组件的基础封装请看上一篇文章。