pdf-dist 实现 canvas绘制文件流

效果

安装依赖

    npm i pdfjs-dist

文件内引入

    import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry';
    import { getDocument, GlobalWorkerOptions } from 'pdfjs-dist'
    GlobalWorkerOptions.workerSrc = pdfjsWorker

上传文件

     <input ref="pdfFile" type="file" accept="application/pdf" @change="handleUpload" />

    handleUpload(e) {
        const file = this.$refs.pdfFile.files[0]
        const reader = new FileReader()
        this.fileName = file.name
        reader.readAsDataURL(file, 'UTF-8')
        reader.onload = evt => {
            const fileData = evt.target.result
            // 加载文件流
            this.loadFile(fileData)
        }
   },

渲染文件

    reRenderPdf(pdf) {
            for (let i = 1; i <= this.pdfDoc.numPages; i++) {
                this.renderPage(pdf, i)
            }
        },
        loadFile(url) {
            let loadingTask = getDocument(url)
            loadingTask.promise
                .then((pdf) => {
                    this.pdfDoc = pdf
                    this.pdf_pages = this.pdfDoc.numPages
                    this.$nextTick(() => {
                        this.reRenderPdf(pdf)
                    })
                })
        },
        // num 表示渲染第几页
        renderPage(pdf, num) {
            pdf.getPage(num).then((page) => {
                const canvas = document.getElementById('pdfCanvas_' + num) // 获取页面中的canvas元素
                // 以下canvas的使用过程
                const ctx = canvas.getContext('2d')
                const dpr = window.devicePixelRatio || 1
                const bsr = ctx.webkitBackingStorePixelRatio ||
                    ctx.mozBackingStorePixelRatio ||
                    ctx.msBackingStorePixelRatio ||
                    ctx.oBackingStorePixelRatio ||
                    ctx.backingStorePixelRatio ||
                    1
                const ratio = dpr / bsr
                // 针对提供的展示比例，返回PDf文档的页面尺寸。
                const viewport = page.getViewport({
                    rotation: 0,
                    scale: this.pdf_scale
                }) // 设置pdf文件显示比例
                console.log(viewport)
                this.pdf_div_width = viewport.width;
                canvas.width = viewport.width * ratio,
                canvas.height = viewport.height * ratio,
                canvas.style.width = viewport.width + 'px'
                canvas.style.height = viewport.height + 'px'
                /**
                 * a	水平缩放绘图
                    b	水平倾斜绘图
                    c	垂直倾斜绘图
                    d	垂直缩放绘图
                    e	水平移动绘图
                    f	垂直移动绘图
                 * */
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0) // 设置当pdf文件处于缩小或放大状态时，可以拖动
                const renderContext = {
                    canvasContext: ctx,
                    viewport: viewport
                }
                // 将pdf文件的内容渲染到canvas中
                page.render(renderContext)

            })
        }

坑

• getPage()API是私有方法，虽然在获取到文件数据是赋值给了this.pdfDoc,但是用this.pdfDoc.getPage()报错。
• 获取PDf文档的页面尺寸的api中需要传入scale以及rotation两个值，scale不设置获取不到文档的宽高，rotation只能设置90的倍数，不设置默认渲染出的文档是倒着的，设置为0，则展示正常

    page.getViewport({ rotation: 0, scale: 1.0 }) // 设置pdf文件显示比例

• canvas 渲染内容时需要遍历页数去渲染，见reRenderPdf方法。