PDF.JS库模糊的PDF模糊

Question

我正在使用pdf.js库在画布上渲染我的pdf文件。 首先，我正在搜索一个解决方案，以渲染pdf的大小与帆布父元素的大小。 我找到了它，它可以正常工作。 然后，我解决了一次渲染所有页面的问题。 最后，我的代码现在看起来像：

pdfjsLib.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjsLib.version}/pdf.worker.min.js`;


class PdfLoader {
    currPage = 1;
    numPages = -1;
    doc = null;

    constructor($container) {
        this.$container = $container;
    }

    load(path) {
        // reset when using more than once
        this.currPage = 1;
        this.promise = new Promise(resolve => this.promiseResolve = resolve);
        this.$container.innerHTML = "";

        pdfjsLib.getDocument(path).promise.then(pdf => {
            this.doc = pdf;
            this.numPages = pdf.numPages;

            pdf.getPage(1).then(this._handlePage.bind(this));
        });

        return this;
    }

    _handlePage(page) {
        let viewport = page.getViewport({scale: 1});
        const scale = this.$container.clientWidth/viewport.width;
        // const outputScale = window.devicePixelRatio || 1;
        const outputScale = 1;

        viewport = page.getViewport({scale});

        const cnv = document.createElement("canvas");
        const ctx = cnv.getContext("2d");

        const width = Math.floor(viewport.width);
        const height = Math.floor(viewport.height);

        cnv.width = Math.floor(width * outputScale);
        cnv.height = Math.floor(height * outputScale);
        cnv.style.width = `${width}px`;
        cnv.style.height =  `${height}px`;

        const transform = (outputScale !== 1) ? [outputScale, 0, 0, outputScale, 0, 0] : null;

        page.render({
            canvasContext: ctx,
            transform: transform,
            viewport: viewport,
        });

        this.$container.appendChild(cnv);

        this.currPage++;
        if (this.doc !== null && this.currPage <= this.numPages) {
            this.doc.getPage(this.currPage).then(this._handlePage.bind(this));
        } else {
            this.promiseResolve();
        }
    }
}

const $pages = document.getElementById("pages");
const pdfLoader = new PdfLoader($pages);
pdfLoader.load("extendedReport.pdf").promise
    .then(initReport);


let arrow = null;

function initReport() {
  // my other stuff
}

现在我的问题是，在查看渲染的PDF时，它的质量看起来很低，并且文本模糊，因此在移动设备上无法阅读文档。我试图像他们在互联网上所说的那样改变量表，但事实并非如此。你能帮我吗，plz？我想念什么？