使用 pdf.js 将 PDF 嵌入网页
Embed PDF using pdf.js to the webpage
对于像我这样的新手来说,pdf.js
是一个有点大的项目。正如大多数帖子所说,这个项目是将 PDF 文件嵌入网络的绝佳工具。但是我很难弄清楚如何使用它。
我想知道的是如何使用pdf.js
嵌入本地PDF文件?
你可以给出相对的URL,例如pdfPath="pdf/TestDocument.pdf"
。
以下是根据 Github 上提供的示例创建的示例代码:
PDFJS.workerSrc ='PATH_TO_WORKER_LOADER/worker_loader.js';
pdfDoc = PDFJS.getDocument(pdfPath);
pdfDoc.then(renderPdf);
function renderPdf(pdfDoc) {
pdfNumPages = pdfDoc.numPages;
pdfDoc.getPage(1).then(renderPage);
}
function renderPage(page) {
var viewport = page.getViewport(scale);
var $canvas = jQuery("<canvas></canvas>");
//Set the canvas height and width to the height and width of the viewport
var canvas = $canvas.get(0);
var context = canvas.getContext("2d");
canvas.height = viewport.height;
canvas.width = viewport.width;
//Append the canvas to the pdf container div (refer a div in your HTML file)
var $editorTextArea = jQuery("#editorTextArea");
$editorTextArea.css("height", canvas.height + "px").css("width", canvas.width + "px");
$editorTextArea.append($canvas);
var canvasOffset = $canvas.offset();
var $textLayerDiv = jQuery("<div />")
.addClass("textLayer")
.css("height", viewport.height + "px")
.css("width", viewport.width + "px")
.offset({
top: canvasOffset.top,
left: canvasOffset.left
});
//The following few lines of code set up scaling on the context if we are on a HiDPI display
var outputScale = getOutputScale(context);
if (outputScale.scaled) {
var cssScale = 'scale(' + (1 / outputScale.sx) + ', ' +
(1 / outputScale.sy) + ')';
CustomStyle.setProp('transform', canvas, cssScale);
CustomStyle.setProp('transformOrigin', canvas, '0% 0%');
}
context._scaleX = outputScale.sx;
context._scaleY = outputScale.sy;
if (outputScale.scaled) {
context.scale(outputScale.sx, outputScale.sy);
}
var renderContext = {
canvasContext: context,
viewport: viewport,
textLayer: textLayer
};
page.render(renderContext);
});
}
相关文章:
- 将网页转换为具有样式的pdf
- 在不带Flash的网页中查看PDF
- 使用window.print内容以pdf格式下载网页
- 点击按钮即可创建网页的图片/pdf/屏幕截图
- 使用JS将网页直接保存为PDF
- 实现PDF预览或从BLOB格式在网页中隐藏PDF的部分-Angular
- 在网页上分配 pdf/doc 文件
- 使用 jsPDf 将网页导出为 PDF
- 如何从网页中的嵌入 pdf 中获取所选文本
- 使用 pdf.js 将 PDF 嵌入网页
- 无需下载即可在网页上查看 PDF 文件
- 将网页转换为PDF并将其保存在服务器中 - JS或PHP
- 在不使用 Flash 的情况下浏览网页中的 PDF
- 如何在pdfmake中获取完整的网页pdf
- 如何让Pdf.js在网页上工作
- 需要从列表、总值和显示系统(PDF或网页)中选择满足他们需求的选项
- 如何从html网页生成pdf
- 自动打印网页为pdf
- 在网页上嵌入PDF并水平滚动以居中
- 网页的PDF导出按钮