VUE2 预览pdf文件（文件来源与后端篇）

PDF 预览。用到了 pdfjs 注意 作者这里的版本 “pdfjs-dist”: “^2.16.105”

安装依赖

npm i pdfjs-dist -D

<template>
    <div>
      
        <h1>查看PDF文件</h1>
        <input type="button" value="请求文件" ref="inputpdf" @click="selectPdf" />
        <br />
        <br />
        <br />
        <el-row justify="center">
            <el-col :span="24">
                <el-pagination layout="prev, pager, next" small background :total="pdfPagesNum"
                    @current-change="currentChange" />
            </el-col>
        </el-row>
        <br />

        <canvas ref="renderContext"></canvas>

    </div>
</template>

<script>
 
import * as PDFJS from "pdfjs-dist/legacy/build/pdf";  // 引入PDFJS 
import pdfjsWorker from "pdfjs-dist/legacy/build/pdf.worker.entry.js"; // 引入workerSrc的地址
PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
import axios from 'axios'
export default {
    data() {
        return {
            pdfPagesNum: 0,
            pdfUrl: '',
            readerpdfDoc: null
        }
    },
    methods: {
       
        selectPdf() {
      		// 这里的文件是 本地用nginx代理的静态文件，  注意文件返回格式一定需要设置为 blob
            let url = 'http://127.0.0.1:10010/123.pdf'
            axios({
                url,
                method: 'get',
                responseType: 'blob',
                headers: {
                    "Content-Type": "application/pdf",
                },
            }).then(res => {

                let blob = new Blob([res.data])
                    
                if (window.createObjectURL != undefined) {
                    // basic
                    this.pdfUrl = window.createObjectURL(blob);
                } else if (window.URL != undefined) {
                    // mozilla(firefox)
                    this.pdfUrl = window.URL.createObjectURL(blob);
                } else if (window.webkitURL != undefined) {
                    // webkit or chrome
                    this.pdfUrl = window.webkitURL.createObjectURL(blob);
                }
                this.getPdf(this.pdfUrl, 1);
            })

        },
        getPdf(url, pageNum) {

            PDFJS.getDocument(url).promise.then((pdfDoc) => {
                this.pdfPagesNum = pdfDoc.numPages * 10; // pdf的总页数
                //获取第pageNum页的数据
                this.readerpdfDoc = pdfDoc;
                this.showPdf(pdfDoc, pageNum)
            });
        },

        currentChange(num) {
            this.showPdf(this.readerpdfDoc, num);
        },
        showPdf(pdfDoc, pageNum) {
            pdfDoc.getPage(pageNum).then((page) => {
                // 设置canvas相关的属性
                const canvas = this.$refs.renderContext
                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;
                const viewport = page.getViewport({ scale: 1 });
                canvas.width = viewport.width * ratio;
                canvas.height = viewport.height * ratio;
                canvas.style.width = viewport.width + "px";
                canvas.style.height = viewport.height + "px";
                ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
                const context = {
                    canvasContext: ctx,
                    viewport: viewport,
                };
                // 数据渲染到canvas画布上
                page.render(context);
            });
        }


    }
}
</script>

 

PDF实现说明
设置PDFJS.GlobalWorkerOptions.workerSrc的地址
通过PDFJS.getDocument处理pdf数据，返回一个对象pdfDoc
通过pdfDoc.getPage单独获取第1页的数据
创建一个dom元素，设置元素的画布属性
通过page.render方法，将数据渲染到画布上

呈现效果