投稿者: 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})おわり
もっと簡単に使えるかと思った(；・∀・)
この設定を使って作ったものは以下にソースなど貼っています
https://qiita.com/babu-ch/items/9b92147d211172cc98c5
 |
