@embedpdf/vue-pdf-viewer内网使用避坑

之前刷到过embedpdf这个新的pdf预览库，就想着把pdfjs-dist或者vue-pdfjs换掉，默认样式非常好看，和前端的设计也很贴近

默认是使用英语，可以直接配置一下展示中文：

vue 复制代码

import { PDFViewer } from '@embedpdf/vue-pdf-viewer'

<PDFViewer
  :config="{
    src,
    theme: { preference: 'light' },
    i18n: {
      defaultLocale: 'zh-CN',
      fallbackLocale: 'en',
    },
  }"
/>

但是真实部署测试的时候发现，有些资源会请求cdn

经过一段时间在embedpdf文档、npmjs 和 node_modules摸索，可以找到pdfium.wasm在 @embedpdf/snippet 包，manifest.json 在 @embedpdf/default-stamps 包提供

如果使用pnpm这种没有幽灵依赖的包管理，需要手动加一个 @embedpdf/snippet 依赖：

打包的话，因为我使用了vite，vite本身提供了wasm导入的方式：cn.vitejs.dev/guide/asset...

所以可以直接引入并提供url：

js 复制代码

import pdfiumUrl from '@embedpdf/snippet/dist/pdfium.wasm?url'
const wasmUrl = pdfiumUrl.startsWith('http') ? pdfiumUrl : `${window.location.origin}${pdfiumUrl}`

因为dev的时候url引入是/node_modules/xxx的地址，embedpdf似乎会先校验是否是一个正确的URL地址，如果不是就会加载失败。

然后就是manifest.json主要是一些盖章的功能，我感觉大部分人不需要这个，如果不需要的话就可以这样阻止加载文件，解决加载过程中一直阻塞pdf预览的问题。

html 复制代码

<PDFViewer
  :config="{
    src,
    theme: { preference: 'light' },
    i18n: {
      defaultLocale: 'zh-CN',
      fallbackLocale: 'en',
    },
    stamp: {
      manifests: [],
    },
    wasmUrl,
  }"
/>

当然你需要加载这个默认json的话可以：

js 复制代码

import stampJson from '@embedpdf/default-stamps/zh-CN/manifest.json?no-inline&url'

html 复制代码

<PDFViewer
  :config="{
    src,
    theme: { preference: 'light' },
    i18n: {
      defaultLocale: 'zh-CN',
      fallbackLocale: 'en',
    },
    stamp: {
      manifests: [{
          url: stampJson,
        }],
    },
    wasmUrl,
  }"
/>

这个json文件很小，不加no-inline的话打包后会被内联成base64，会和上面的wasm的加载一样报错。json还表示了使用了一个stamp.pdf，如果需要使用盖章还需要把node_modules/@embedpdf/default-stamps/zh-CN/stamps.pdf复制到public/assets/stamps.pdf

至此应该就能完全内网使用了XD