pdfjs+viteの設定

投稿者:

pdfjsを使う時にいろいろハマった部分

ワーカーの設定

サンプルみたいにパスやURLじゃなくてimportでやった

import * as pdfjsLib from "pdfjs-dist"
import PdfJsWorker from 'pdfjs-dist/build/pdf.worker.js?worker'

pdfjsLib.GlobalWorkerOptions.workerPort = new PdfJsWorker()

↓参考↓

https://ja.vitejs.dev/guide/assets.html#importing-asset-as-url

cmapsの設定

デフォのままだと日本語が描画出来てなかったりする

↓みたいなエラーが出る時

font loading: CMapReaderFactory not initialized,

これも昔の情報だとDLしたcmapsへのパスなどが多かったので

vite-plugin-static-copyでビルド時にコピるようにした

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: "assets"
          }
        ]
      })
  ]
})

scriptの方ではローカルと本番でパスを変えて

const CMAP_URL = import.meta.env.DEV ? "../../node_modules/pdfjs-dist/cmaps/" : "./assets/cmaps/"

getDocumentのオプションにいろいろ追加

const task = await pdfjsLib.getDocument({url, cMapUrl: CMAP_URL, cMapPacked: true, useWorkerFetch: false})

おわり

もっと簡単に使えるかと思った(;・∀・)

Clean Coder プロフェッショナルプログラマへの道 (アスキードワンゴ)