vue3中使用pdfjs-dist预览pdf，vue.config.js配置pdf文件

参考博文：

1.pdfjs-dist        https://juejin.cn/post/6995856687106261000

2.vue.config.js配置    https://ask.csdn.net/questions/7425984

遇到问题：

1.vue-pdf在vue3项目中引入时报错，似乎是不支持。所以选择了pdfjs-dist。

2.在引入pdf文件时报错

 解决：配置vue.config.js中对pdf文件的支持。

const path = require('path');

module.exports = {

    publicPath: "./", // 构建好的文件输出到哪里

    outputDir: "dist", // where to put static assets (js/css/img/font/...) // 是否在保存时使用‘eslint-loader’进行检查 // 有效值: true | false | 'error' // 当设置为‘error’时，检查出的错误会触发编译失败

    assetsDir: 'assets',

    transpileDependencies:['@vue/reactivity'],

    chainWebpack: config => {
        // ...
        config.module.rule('pdfjs-dist').test({
         test: /\.js$/,
         include: path.join(__dirname, 'node_modules/pdfjs-dist')
       }).use('babel-loader').loader('babel-loader').options({
         presets: ['@babel/preset-env'],
         plugins: ['@babel/plugin-proposal-optional-chaining']
       })

//-------------------------- 配置pdf文件----------------------------------------
       config.module
       .rule('pdf')
       .test(/\.(pdf)$/)
       .use('url-loader')
       .loader('url-loader')
       .options({
         limit: 10000
       })
       .end()
//-------------------------- 配置pdf文件----------------------------------------
     },
};
           

3.注意：

需要在引入

pdfjs-dist

之后配置

workerSrc

，但是引入

pdfjs-dist/build/pdf.worker.entry

之后浏览器还是有个警告：

Warning: Setting up fake worker.

，经过各种原因查找，最终找到了一句描述：pdf.worker.js必须位于自己的文件中（而不是与pdf.js捆绑在一起）。否则它不能在服务工作线程中运行。

解决方式：将

pdfjs-dist/build/pdf.worker.js

复制一份放到项目

public

目录下。

以下是组件全部代码：

<template>
    <div class="help-page">
        <template v-for="item in pageNum" :key="item">
            <canvas :id="`pdf-canvas-${item}`" class="pdf-page" />
        </template>
        <canvas id="pdf-canvas" class="pdf-page" />
    </div>
</template>

<script >
import { defineComponent, toRefs, nextTick, reactive } from '@vue/runtime-core'
/**
 * 帮助文档:HelpPage
 * ==========================================
 */
export default defineComponent({
    code: '帮助文档',
    name: 'HelpPage',
    props: {},
    components: {},
    setup() {
        const PDF = require('pdfjs-dist')
        const url = require('../../../public/help.pdf')
        PDF.GlobalWorkerOptions.workerSrc = '/pdf.worker.js'

        const state = reactive({
            pageNum: 0,
            pdfCtx: null,
        })

        const resolvePdf = () => {
            const loadingTask = PDF.getDocument(url)
            loadingTask.promise.then((pdf: any) => {
                state.pdfCtx = pdf
                state.pageNum = pdf.numPages
                nextTick(() => {
                    renderPdf()
                })
            })
        }
        const renderPdf = (num = 1) => {
            if (state.pdfCtx) {
                const pdfCtx = state.pdfCtx as any
                pdfCtx.getPage(num).then((page: any) => {
                    const canvas = document.getElementById(
                        `pdf-canvas-${num}`
                    ) as any
                    const ctx = canvas.getContext('2d')
                    const viewport = page.getViewport({ scale: 2 })
                    var CSS_UNITS = 96.0 / 72.0
                    canvas.height = Math.floor(viewport.height * CSS_UNITS)
                    canvas.width = Math.floor(viewport.width * CSS_UNITS)
                    // 画布的dom大小, 设置移动端,宽度设置铺满整个屏幕
                    const clientWidth = canvas.width
                    canvas.style.width = clientWidth + 'px'
                    // 根据pdf每页的宽高比例设置canvas的高度
                    canvas.style.height =
                        clientWidth * (canvas.height / canvas.width) + 'px'
                    page.render({
                        transform: [CSS_UNITS, 0, 0, CSS_UNITS, 0, 0],
                        canvasContext: ctx,
                        viewport,
                    })
                    if (num < state.pageNum) {
                        renderPdf(num + 1)
                    }
                })
            }
        }

        resolvePdf()

        return { PDF, ...toRefs(state), resolvePdf, renderPdf }
    },
})
</script>

<style  scoped>
.help-page {
    width: 100%;
    height: 100%;
}
</style>