PDF预览 (pdfjs-dist)

最新推荐文章于 2026-05-17 09:37:12 发布

原创最新推荐文章于 2026-05-17 09:37:12 发布 · 1.3k 阅读

5 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#pdf #前端 #javascript

收录于

环境： vue 3.2.45 + vite 4.2.1 + pdfjs-dist 4.2.67

安装pdfjs-dist

npm install pdfjs-dist

模板

<div class="pdf-container">
	<canvas
	  v-for="index in canvasTotalPage"
	  :id="`pdf-canvas-${index}`"
	  :key="index"
	/>
</div>

Js代码

import * as pdfjsLib from 'pdfjs-dist'
import * as workerSrc from 'pdfjs-dist/build/pdf.worker.min?url'
pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc.default

const canvasTotalPage = ref<any[]>([])

关于workerSrc 引入这个代码，好像很多版本都不一样的，网上的引入写法也是挺多

.

vite打包报错处理

报错：Top-level await is not available in the configured target environment (“chrome87”, “edge88”, “es2020”, “firefox78”, “safari14” + 2 overrides)

原因：vite 它不支持顶级的 async/await 语法，安装topLevelAwait插件兼容一下即可

安装 topLevelAwait

npm install vite-plugin-top-level-await -D

vite.config.ts文件配置

import topLevelAwait from 'vite-plugin-top-level-await'

export default defineConfig({
	......
	plugins: [
		topLevelAwait({
	      promiseExportName: '__tla',
	      promiseImportName: (i) => `__tla_${i}`,
	    }),
	],
})