关于一个pdf渲染的业务需求

关于pdf.js的使用
目前找到的好多pdfjs的使用方法都是一些模块开发类
关于原生js的使用方法很少
所以抽空写了一个pdf渲染的方法
依赖于《pdf.js》《pdf.worker.js》

首先页面引用下《pdf.js》《pdf.worker.js》

/**
 * Author: HuangChaoHui
 * Date: 2023-03-14
 * PDFRender
 * 渲染pdf至页面(无其他额外操作)
 * @param { Object } config - 文件地址和需要渲染到的DomId
 *  {
 *      file: "./file.pdf", // pdf文件的路径
 *      PDFView: "PDFView", // pdf渲染到的domId
 *      scale: 1.5, // 缩放倍数 默认为1
 *  }
 */


class PDFRender {
    constructor(config) {
        this.file = config.file;
        this.scale = config.scale || 1;
        this.PDFViewId = config.PDFViewId;
        this.PDFView = document.getElementById(config.PDFViewId);
        this._init()
    }

    _init() {

        // 判断是否存在pdf.js 如果不存在提醒用户引入
        if (typeof pdfjsLib === "undefined") {

            console.log("%c项目依赖于 《pdf.js》 《pdf.worker.js》", "color:orange;")　
            console.log("%c在您的项目中似乎没有找到这个 请引入后再试一次", "color:orange;")　

            return
        }

        let _self = this

        // 解析pdf
        this.PDFContent = pdfjsLib.getDocument(this.file);

        // 获取到解析pdf后的值
        this.PDFContent.promise.then(function (pdf) {

            _self._render(pdf)
            _self._addClass()

        });

    }

    _render(pdf) {

        // 获取PDF的页数
        let pageNum = pdf.numPages;

        // 设置展示比例
        let scale = this.scale;

        for (let i = 0; i < pageNum; i++) {
            let nowNum = i + 1

            let el = document.createElement("canvas");

            let canvasId = "NovchCanvas" + nowNum

            el.id = canvasId

            this.PDFView.appendChild(el)

            pdf.getPage(nowNum).then(function (page) {

                // 设置pdf渲染的倍数
                let viewport = page.getViewport({ scale });

                // 获取需要渲染的元素
                let canvas = document.getElementById(canvasId);

                let context = canvas.getContext('2d');

                canvas.height = viewport.height;

                canvas.width = viewport.width;

                let renderContext = {
                    canvasContext: context,
                    viewport: viewport
                };

                page.render(renderContext);

            });

        }

    }

    _addClass() {
        let style = document.createElement("style")

        let styleStr = `
            #${this.PDFViewId} {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
            }
        `

        style.innerHTML = styleStr

        document.getElementsByTagName("head")[0].appendChild(style)

    }

}

具体的内容看附件吧
PDF渲染.zip