Customizing pdf.js
Customizing pdf.js
我想在我的webApplication中使用pdf.js并自定义它的视图,这样我就可以将它嵌入到我的应用程序的其余部分(我正在考虑使用iframe)。
首先,我想摆脱大多数默认的工具栏按钮,如"打印"或"下载文件",但保留缩放和页面导航。相反,我希望这些功能(打印/下载)出现在我的应用程序的工具栏中。怎么做呢?我怎么能隐藏从pdf.js工具栏的打印/下载按钮,并调用这个功能与我的自定义按钮,其中呈现在我的web应用程序已经?
或者我应该使用其他库而不是pdf.js?
任何信息都很有帮助!!
您还可以构建自己的PDF查看器。您需要在文档中添加canvas元素。请参阅下面的示例代码。您可以添加简单的按钮或屏幕滑动来导航到下一页或重新加载具有不同比例的页面。最初它设置为适合屏幕宽度。也可以参见github中的pdf.js示例。示例代码:
function initializePsfJS() {
pdfDoc = null;
pageNum = 1;
pageRendering = false;
pageNumPending = null;
scale = 1;
canvas = document.getElementById('the-canvas');
ctx = canvas.getContext('2d');
viewport = null;
PDFJS.workerSrc = './js/pdf.worker.js';
}
/**
* 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) {
if (scale === "fit") {
var unscaledViewport = page.getViewport(1);
var viewerCont = document.getElementById('viewerDiv');
var bdrec = viewerCont.getBoundingClientRect();
scale = Math.min((bdrec.height / unscaledViewport.height), (bdrec.width / unscaledViewport.width));
}
viewport = page.getViewport(scale);
canvas.height = viewport.height;
canvas.width = viewport.width;
// Render PDF page into canvas context
var renderContext = {
canvasContext : ctx,
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;
}
calculateinitialXY();
});
});
}
/**
* 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);
}
}
function getDocumentByXMLHttpRequest() {
//reason for this
//http://stackoverflow.com/questions/36199155/pdf-file-generated-by-post-request-not-opening
var header = getHeader();
var requesturl = < url rest service url to fetch document >
var xhr = new XMLHttpRequest();
xhr.open('GET', requesturl);
xhr.setRequestHeader(header.key, header.value);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
if (this.status == 200) {
onloadDocumentFromContent(this.response);
} else {
navigator.notification.alert('Error while requesting pdf with id ' + getDocumentId());
}
};
xhr.send();
}
function onloadDocumentFromContent(pdfraw) {
var docInitParams = {
data : pdfraw
};
PDFJS.getDocument(docInitParams).then(function (pdfDoc_) {
pdfDoc = pdfDoc_;
// Initial/first page rendering
renderPage(pageNum);
});
}
好了,我知道怎么做了。要隐藏按钮,只需添加CSS类"hidden"到它,如"toolbarButton download hiddenMediumView hidden"。要下载文件,只需调用"PDFViewerApplication.download();"。要打印它,使用window.print()。
所有的处理程序都在view.js文件中列出。只需搜索"//事件处理函数"。在我的版本中,它在1840行。
我想这是最简单的方法。当然,按钮可以完全从DOM中删除,但这也意味着要改变view.js文件。
如果你使用的是pdfjs网页版本,你想隐藏打印按钮,例如,你可以这样做:
<iframe
src={`/pdfjs/web/viewer.html?file=${pdfFile}`}
onLoad={(e) => {
Array.from(e.target.contentDocument
.getElementsByClassName('print'))
.forEach((i) => { i.classList.add('hidden'); });
}}
>
</iframe>
你需要将样式添加到iframe渲染的新HTML中,默认情况下浏览器不会将主应用程序中的样式应用到iframe渲染的应用程序中。
另一个例子是添加简单的颜色变化:
<iframe id='iframe_pdfjs'
src={`/pdfjs/web/viewer.html?file=${pdfFile}`}
onLoad={(e) => {
const cssStyle = document.createElement('style');
cssStyle.innerHTML = 'div {color: red;}';
document.getElementsById('iframe_pdfjs').contentDocument.head.appendChild(cssStyle)
></iframe>
在上面的例子中,我们只是添加样式标签到iframe呈现的HTML
- 在Meteor js中生成PDF报告
- Pdf.js:使用base64文件源而不是url来呈现Pdf文件
- 如何使用chart.js导出Excel和PDF格式的图表
- 如何在PDF中放置滚动功能.js
- PDF.js - 一次打印多个文档
- 使用PDF.js获取PDF的修剪区域
- PDF.js在打印时插入空白页
- 正在获取文本内容pdf.js
- 使用TableExport.js将HTML表格导出为PDF、WORD、PNG
- PDF.js插入图像
- 使用JS将网页直接保存为PDF
- 使用pdf.js查看器打开一个外部文件
- 上传PDF's使用Dropzone.js&拉拉维尔.有些上传成功,另一些则返回一个空对象
- 使用PDF.JS和AngularJS从字节数组渲染PDF
- 使用pdf.js突出显示pdf中的一个部分
- Java使用css+js将html转换为pdf
- 有没有办法用pdf.js为pdf渲染编写javascript事件
- 访问PDF.js查看器函数/事件
- 是否可以使用 pdfmake.js 在 pdf 文件中重复表格行
- 从pdf . js pdf转换为画布标签获得base64 png