javascript - 使用 pdf.js 以高质量呈现 pdf
问题描述
我正在尝试使用 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>
解决方案
这是使用一些 jQuery 来创建画布元素。
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(...)
推荐阅读
- c# - 如何根据 DataGrid 子项的存在设置 xaml 样式 ControlTemplate 中按钮的可见性
- python - 有什么办法可以将多个 ASCII 字符转换成一串数字?
- python - 比较在 scikit-learn 中调整超参数的方法
- java - 在 android studio 中计算 GPA
- c++ - Function of a function does not recognize an input parameter
- java - 我应该将此设置为已检查还是未检查的异常?
- javascript - JavaScript for 循环在中间停止运行
- asp.net-ajax - Razor Pages AJAX url id 参数
- java - 为什么我会收到此 NullPointerException:空对象引用错误?
- sql - 在 SQL(ORACLE) 中获取前 N 个类别(变量的维度)