我正在尝试使用 pdf.js 显示 pdf。我能够在所有设备上正确显示它。但是,在视网膜显示器和 4k 显示器上它是模糊的。
我在这里、这里和这里发现,我必须使用该值window.devicePixelRatio
,但我不是 Javascript 专家,我不知道如何使用它。
同样在这里,mozilla 对如何设置像素比率有一个简单的(不适合我)解释。但是因为我刚刚开始使用 JS,所以我被困住了。
这是我的代码:
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
var url = 'https://www.tecmasolutions.com/clients/pdf/pdf-doppia-2.pdf';
// Loaded via <script> tag, create shortcut to access PDF.js exports.
var pdfjsLib = window['pdfjs-dist/build/pdf'];
// The workerSrc property shall be specified.
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";
scale = 2.5;
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
// Using promise to fetch the page
pdfDoc.getPage(num).then(function(page) {
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(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
var renderContext = {
canvasContext: context,
viewport: viewport
};
var renderTask = page.render(renderContext);
// Wait for rendering to finish
renderTask.promise.then(function() {
pageRendering = false;
if (pageNumPending !== null) {
// New page rendering is pending
renderPage(pageNumPending);
pageNumPending = null;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = num;
}
/**
* If another page rendering in progress, waits until the rendering is
* finised. Otherwise, executes rendering immediately.
*/
function queueRenderPage(num) {
if (pageRendering) {
pageNumPending = num;
} else {
renderPage(num);
}
}
/**
* Displays previous page.
*/
function onPrevPage() {
if (pageNum <= 1) {
return;
}
pageNum--;
queueRenderPage(pageNum);
}
document.getElementById('prev').addEventListener('click', onPrevPage);
/**
* Displays next page.
*/
function onNextPage() {
if (pageNum >= pdfDoc.numPages) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* Asynchronously downloads PDF.
*/
pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
pdfDoc = pdfDoc_;
document.getElementById('page_count').textContent = pdfDoc.numPages;
// Initial/first page rendering
renderPage(pageNum);
});
</script>
<script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
<div class="html-embed w-embed w-script" id="the-container">
<canvas id="the-canvas"></canvas>
<div id="text-layer"></div>
</div>
<div class="pdf-wrapper">
<div id="prev" class="prev-next"><</div>
<div id="next" class="prev-next">></div>
</div>
<div class="numero-pagina">pagina: <span id="page_num">1</span> / <span id="page_count">45</span></div>