回答
合并多个文稿和仅显示他们作为一个与pdf.js是容易实现 - 我只是砍死基于一个简单的prev/next viewer的例子,Mozilla浏览器在他们的仓库提供了下面的例子。
// If absolute URL from the remote server is provided, configure the CORS
// header on that server.
//
var urls = [
'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf',
'http://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf'
];
// Disable workers to avoid yet another cross-origin issue (workers need
// the URL of the script to be loaded, and dynamically loading a cross-origin
// script does not work).
//
// PDFJS.disableWorker = true;
// In cases when the pdf.worker.js is located at the different folder than the
// pdf.js's one, or the pdf.js is executed via eval(), the workerSrc property
// shall be specified.
//
// PDFJS.workerSrc = 'pdf.worker.js';
/**
* @typedef {Object} PageInfo
* @property {number} documentIndex
* @property {number} pageNumber
*/
var pdfDocs = [],
/**
* @property {PageInfo}
*/
current = {},
totalPageCount = 0,
pageNum = 1,
pageRendering = false,
pageNumPending = null,
scale = 0.8,
canvas = document.getElementById('the-canvas'),
ctx = canvas.getContext('2d');
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
function renderPage(num) {
pageRendering = true;
current = getPageInfo(num);
// Using promise to fetch the page
pdfDocs[current.documentIndex]
.getPage(current.pageNumber).then(function (page) {
var 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;
}
});
});
// Update page counters
document.getElementById('page_num').textContent = pageNum;
}
/**
* 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 >= totalPageCount && current.documentIndex + 1 === pdfDocs.length) {
return;
}
pageNum++;
queueRenderPage(pageNum);
}
document.getElementById('next').addEventListener('click', onNextPage);
/**
* @returns PageNumber
*/
function getPageInfo (num) {
var totalPageCount = 0;
for (var docIdx = 0; docIdx < pdfDocs.length; docIdx++) {
totalPageCount += pdfDocs[docIdx].numPages;
if (num <= totalPageCount) {
return {documentIndex: docIdx, pageNumber: num};
}
num -= pdfDocs[docIdx].numPages;
}
return false;
};
function getTotalPageCount() {
var totalPageCount = 0;
for (var docIdx = 0; docIdx < pdfDocs.length; docIdx++) {
totalPageCount += pdfDocs[docIdx].numPages;
}
return totalPageCount;
}
var loadedCount = 0;
function load() {
// Load PDFs one after another
PDFJS.getDocument(urls[loadedCount]).then(function (pdfDoc_) {
console.log('loaded PDF ' + loadedCount);
pdfDocs.push(pdfDoc_);
loadedCount++;
if (loadedCount !== urls.length) {
return load();
}
console.log('Finished loading');
totalPageCount = getTotalPageCount();
document.getElementById('page_count').textContent = totalPageCount;
// Initial/first page rendering
renderPage(pageNum);
});
}
<!DOCTYPE html>
<html>
<head>
<base href="https://mozilla.github.io/pdf.js/" />
<meta charset="UTF-8">
<title>Previous/Next example</title>
</head>
<body onload="load()">
<div>
<button id="prev">Previous</button>
<button id="next">Next</button>
<span>Page: <span id="page_num"></span>/<span id="page_count"></span></span>
</div>
<div>
<canvas id="the-canvas" style="border:1px solid black"></canvas>
</div>
<!-- for legacy browsers add compatibility.js -->
<script src="web/compatibility.js"></script>
<script src="build/pdf.js"></script>
</body>
</html>
有关发送正确的CORS标头的服务器没有在那里可靠的测试文档的缘故,这个例子只是合并的默认文档的两个副本。如果您在自己的服务器上执行此操作,您当然可以将其添加到urls
阵列中,以添加在同一个域中托管的任何文档。
真棒,很高兴看到一个实际的解决方案 – 2016-12-05 22:55:59
我的荣幸:D无论如何都需要这个项目作为概念证明,所以不用客气。图书馆的[api文档](http://mozilla.github.io/pdf.js/api/draft/index.html)是不存在的 - 但是长时间盯着它们的代码有时候最终会让我到某个地方。 – Philzen 2016-12-05 23:07:57
你最好先合并服务器上的页面。
你会为此推荐tcpdf吗? – 2012-03-23 12:43:19
或Itext,如果你在Java中工作。 – 2012-03-23 17:08:49
java不是javascript。为什么我会喜欢用java?我现在使用fpdf和fpdi – 2012-03-27 12:06:47
- 1. 有没有办法在reportlib中用python3合并PDF文件?
- 2. 有没有办法写为PDF JavaScript事件渲染使用pdf.js
- 3. 有没有办法在jpanel中渲染pdf文件?
- 4. 有没有办法用itextsharp替换PDF文件中的文本?
- 5. 有没有办法在abcpdf9中创建pdf包/组合?
- 6. 有没有办法将pdb文件与ilmerge合并?
- 7. 有没有办法将两个.gcda文件合并为一个?
- 8. 有没有办法将两个gcov文件合并为一个
- 9. 有没有办法在xcode 5中创建word文档或pdf
- 10. 有没有办法在MySQL中合并布尔值字段?
- 11. iOS - 有没有办法用图层生成PDF文件?
- 12. 有没有办法通过docconv网络覆盖.pdf文件?
- 13. 有没有办法用C#编辑pdf?
- 14. 有没有办法使用iTextSharp合并动态XFA文档
- 15. 有没有办法将PDF文件转换为jpg没有imagemagick或ghostscript。?
- 16. 在Symfony中,有没有办法一次创建pdf文件页面?
- 17. 有没有办法在VB.net中关闭打开的PDF文件编程方式
- 18. 有没有办法在ColdFusion中使用XML源代码创建PDF文件?
- 19. 有没有办法在PDF文件中使用自定义字体?
- 20. PDF.Js不加载PDF文件
- 21. pdf.js与本地pdf文件
- 22. 有没有办法在PHP中从流中重新创建PDF?
- 23. 有没有办法在jQuery/Javascript中结合事件?
- 24. 有没有办法将python代码合并到moinmoin页面中?
- 25. 有没有办法切换JavaScript文件?
- 26. 有没有办法调试plist文件?
- 27. 有没有办法解压JavaScript文件?
- 28. 有没有办法保护iCalender文件?
- 29. 有没有办法测试CSS文件?
- 30. 有没有办法区分C++文件?
据我所知,pdf.js是一个使用HTML5而不是PDF生成器的PDF渲染库。您是否正在寻找在同一HTML5画布中呈现多个PDF? – 2012-03-21 16:46:45
是这就是我需要 – 2012-03-21 17:27:31