我正在尝试使用pdf.js显示pdf。我能够在所有设备上正确显示它。但是,在视网膜显示屏和4k显示屏上,它是模糊的。
我发现here,here和here,我必须使用值window.devicePixelRatio
但我不是Java语言专家,因此我不知道如何使用它。
也here,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>
这使用了一些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(...)