Javascript 使用pdf.js以高质量呈现pdf

我正在尝试使用pdf.js显示pdf。 我能够在所有设备上正确显示它。但是，在视网膜显示器和4k显示器上，它是模糊的

我发现，并且，我必须使用值

窗口。devicePixelRatio

但我不是Javascript专家，也不知道如何使用它

此外，mozilla对如何设置像素比率有一个简单的解释（不是为我）。但是因为我刚开始学习JS，所以我被卡住了

这是我的密码：

//如果提供了来自远程服务器的绝对URL，请配置CORS
//该服务器上的头。
var url='1〕https://www.tecmasolutions.com/clients/pdf/pdf-doppia-2.pdf';
//通过标签加载，创建访问PDF.js导出的快捷方式。
var pdfjsLib=window['pdfjs-dist/build/pdf']；
//应规定工人的财产。
pdfjsLib.GlobalWorkerOptions.workerSrc='/mozilla.github.io/pdf.js/build/pdf.worker.js'；
var pdfDoc=null，
pageNum=1，
pageRendering=false，
pageNumPending=null，
canvas=document.createElement（'the-canvas'）；
//ctx=canvas.getContext（'2d'）；
canvas.style.height=“1000px”；
canvas.style.width=“900px”；
比例=2.5；
/**
*从文档中获取页面信息，相应地调整画布大小，并呈现页面。
*@param num页码。
*/
函数呈现页面（num）{
pageRendering=true；
//使用promise获取页面
pdfDoc.getPage（num）.然后（函数（第页）{
var container=document.getElementById（'the-container'）；
var canvas=document.getElementById（'the-canvas'）；
var context=canvas.getContext（'2d'）；
var viewport=page.getViewport（1）；
var scale=container.clientWidth/viewport.width；
viewport=page.getViewport（比例）；
canvas.height=viewport.height；
canvas.width=viewport.width；
var renderContext={
背景：背景，
视口：视口
};
var renderTask=page.render（renderContext）；
//等待渲染完成
promise.then（函数（）{
pageRendering=false；
如果（pageNumPending！==null）{
//新页面呈现挂起
渲染页面（pageNumPending）；
pageNumPending=null；
}
});
});
//更新页面计数器
document.getElementById（'page_num'）。textContent=num；
}
/**
*如果正在进行另一个页面渲染，请等待渲染完成
*完成了。否则，将立即执行渲染。
*/
函数queueRenderPage（num）{
如果（页面渲染）{
pageNumPending=num；
}否则{
渲染页面（num）；
}
}
/**
*显示上一页。
*/
函数onPrevPage（）{
如果（pageNum=pdfDoc.numPages）{
返回；
}
pageNum++；
queueRenderPage（pageNum）；
}
document.getElementById（'next'）。addEventListener（'click'，onNext'）；
/**
*异步下载PDF。
*/
pdfjsLib.getDocument（url）.promise.then（函数（pdfDoc)）{
pdfDoc=pdfDoc；
document.getElementById（'page_count'）。textContent=pdfDoc.numPages；
//初始/第一页呈现
渲染页面（pageNum）；
});

pagina:1/45

这是使用一点jQuery来创建canvas元素

var canvas = $('<canvas/>').get(0),
    context = canvas.getContext('2d'),
    scale = window.devicePixelRatio || 1,
    viewport = page.getViewport({scale: scale}),
    view = page.view, // [x1, y1, x2, y2]
    width = view[2] - view[0],
    height = view[3] - view[1];

    context.scale(scale, scale);
    canvas.width = width * scale;
    canvas.height = height * scale;
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    page.render(renderContext).then(...)

var canvas=$（''）.get（0），
context=canvas.getContext（'2d'），
比例=window.devicePixelRatio | | 1，
viewport=page.getViewport（{scale:scale}），
视图=page.view，/[x1，y1，x2，y2]
宽度=视图[2]-视图[0]，
高度=视图[3]-视图[1]；
语境。尺度（尺度，尺度）；
canvas.width=宽度*比例；
canvas.height=高度*比例；
var renderContext={
背景：背景，
视口：视口
};
render（renderContext）。然后（…）

这是使用jQuery创建canvas元素

var canvas = $('<canvas/>').get(0),
    context = canvas.getContext('2d'),
    scale = window.devicePixelRatio || 1,
    viewport = page.getViewport({scale: scale}),
    view = page.view, // [x1, y1, x2, y2]
    width = view[2] - view[0],
    height = view[3] - view[1];

    context.scale(scale, scale);
    canvas.width = width * scale;
    canvas.height = height * scale;
    var renderContext = {
        canvasContext: context,
        viewport: viewport
    };
    page.render(renderContext).then(...)

var canvas=$（''）.get（0），
context=canvas.getContext（'2d'），
比例=window.devicePixelRatio | | 1，
viewport=page.getViewport（{scale:scale}），
视图=page.view，/[x1，y1，x2，y2]
宽度=视图[2]-视图[0]，
高度=视图[3]-视图[1]；
语境。尺度（尺度，尺度）；
canvas.width=宽度*比例；
canvas.height=高度*比例；
var renderContext={
背景：背景，
视口：视口
};
render（renderContext）。然后（…）

此代码修复了pdf模糊问题：

    var loadingTask = pdfjsLib.getDocument(this.url);
loadingTask.promise.then(function (pdf) {
    var scale = 1.3;
    inst.number_of_pages = pdf.numPages;

    for (var i = 1; i <= pdf.numPages; i++) {
        pdf.getPage(i).then(function (page) {
            var canvas = document.createElement('canvas');
            document.getElementById(inst.container_id).appendChild(canvas);             
            let ctx = canvas.getContext('2d')
            let dpr = window.devicePixelRatio || 1
            let bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1
            let ratio = dpr / bsr
            let  originalviewport = page.getViewport({ scale: 1.5, });
            var viewport = page.getViewport({scale:screen.availWidth / originalviewport.width,})
            viewport = originalviewport
            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)

            var renderContext = {
                canvasContext: ctx,
                viewport: originalviewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
                $('.pdf-canvas').each(function (index, el) {
                    $(el).attr('id', 'page-' + (index + 1) + '-canvas');
                });
                inst.pages_rendered++;
                if (inst.pages_rendered == inst.number_of_pages) inst.initFabric();
            });
        });
    }
}, function (reason) {
    console.error(reason);
});

var loadingTask=pdfjsLib.getDocument（this.url）；
loadingTask.promise.then（函数（pdf）{
var标度=1.3；
说明页数=pdf.numPages；
对于（var i=1；i此代码修复了pdf模糊问题：

    var loadingTask = pdfjsLib.getDocument(this.url);
loadingTask.promise.then(function (pdf) {
    var scale = 1.3;
    inst.number_of_pages = pdf.numPages;

    for (var i = 1; i <= pdf.numPages; i++) {
        pdf.getPage(i).then(function (page) {
            var canvas = document.createElement('canvas');
            document.getElementById(inst.container_id).appendChild(canvas);             
            let ctx = canvas.getContext('2d')
            let dpr = window.devicePixelRatio || 1
            let bsr = ctx.webkitBackingStorePixelRatio ||
              ctx.mozBackingStorePixelRatio ||
              ctx.msBackingStorePixelRatio ||
              ctx.oBackingStorePixelRatio ||
              ctx.backingStorePixelRatio || 1
            let ratio = dpr / bsr
            let  originalviewport = page.getViewport({ scale: 1.5, });
            var viewport = page.getViewport({scale:screen.availWidth / originalviewport.width,})
            viewport = originalviewport
            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)

            var renderContext = {
                canvasContext: ctx,
                viewport: originalviewport
            };
            var renderTask = page.render(renderContext);
            renderTask.promise.then(function () {
                $('.pdf-canvas').each(function (index, el) {
                    $(el).attr('id', 'page-' + (index + 1) + '-canvas');
                });
                inst.pages_rendered++;
                if (inst.pages_rendered == inst.number_of_pages) inst.initFabric();
            });
        });
    }
}, function (reason) {
    console.error(reason);
});

var loadingTask=pdfjsLib.getDocument（this.url）；
loadingTask.promise.then（函数（pdf）{
var标度=1.3；
说明页数=pdf.numPages；
对于（var i=1；i