Question

我想做客户端scrpting来合并和拆分pdf，所以我想使用itextsharp。可以用于javascript。我是Javascript的新手。请帮助我提出宝贵的建议。

Answer 1

这是一个用于生成PDF的javascript库。它适用于客户端：

http://parall.ax/products/jspdf#

另一种解决方案是进行ajax调用，使用您想要使用的任何技术（itextsharp）在服务器上生成PDF，并将生成的PDF返回给客户端。

Answer 2

PDf JS无法合并两个PDF。它只能将jpeg和png文件合并到pdf中。不支持合并的gif，bmp，tiff和pdf

Answer 3

如果你想进行合并操作，那么你可以使用easy-pdf-merge下面的链接：

https://www.npmjs.com/package/easy-pdf-merge

以下是一个例子：

var merge = require('easy-pdf-merge');
merge(['File One.pdf','File Two.pdf'],'File Ouput.pdf',function(err){


    if(err)
    return console.log(err);

    console.log('Successfully merged!');
});

希望这有帮助。

Answer 4

如果您只想在浏览器中将多个PDF合并为单个文档，那么pdf.js肯定可以这样做 - 请参阅我的answer here。

当然，该示例也可用于显示特定的页面子集，从而使用户能够分割它。

但是，如果您需要将结果提供下载，那么服务器端处理就无法（afaik） - 至少如果您想要保持开源，免费领域。< / p>

更新：使用pdf.js（Mozilla）的组合来渲染pdf（默认情况下在画布上发生）和jsPdf（parall.ax）能够通过使用画布获得合并结果（甚至是在画布上绘制的任何其他内容）进行下载，打印等。 toDataUrl()方法发现this answer逐页导出（使用jsPdf＆＃39; s addPage函数）

Answer 5

我找到了一个使用 PDF-LIB 库的完全客户端解决方案：https://pdf-lib.js.org/

它使用函数 mergeAllPDFs，该函数带有一个参数：urls，它是文件的 url 数组。

async function mergeAllPDFs(urls) {
    
    const pdfDoc = await PDFLib.PDFDocument.create();
    const numDocs = urls.length;
    
    for(var i = 0; i < numDocs; i++) {
        const donorPdfBytes = await fetch(urls[i]).then(res => res.arrayBuffer());
        const donorPdfDoc = await PDFLib.PDFDocument.load(donorPdfBytes);
        const docLength = donorPdfDoc.getPageCount();
        for(var k = 0; k < docLength; k++) {
            const [donorPage] = await pdfDoc.copyPages(donorPdfDoc, [k]);
            //console.log("Doc " + i+ ", page " + k);
            pdfDoc.addPage(donorPage);
        }
    }

    const pdfDataUri = await pdfDoc.saveAsBase64({ dataUri: true });
    //console.log(pdfDataUri);
  
    // strip off the first part to the first comma "data:image/png;base64,iVBORw0K..."
    var data_pdf = pdfDataUri.substring(pdfDataUri.indexOf(',')+1);
}

确保在标题中包含以下内容：

<script src='https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.js'></script>
<script src='https://cdn.jsdelivr.net/npm/pdf-lib/dist/pdf-lib.min.js'></script>

Answer 6

不，您不能在浏览器中使用iTextSharp（用Java编写的iText的.Net端口）。

您可以在iText中使用Java applet，或者如果您搜索有几个JavaScript库（主要是实验性的，我了解，例如this one Mozilla，或this one）。

Answer 7

有几个客户端JavaScript库支持合并和拆分现有的PDF，据我所知，这可能对您有用：

PDF Assembler支持这一点，并且有一个live demo。 README的Prior Art / Alternatives部分值得一看，其中提到并评论了其他几个JavaScript PDF库（不一定是客户端）。
pdf-lib是一个正在积极开发中的较新的库。同样，Prior Art部分值得一试。

Answer 8

您可以将纯JS与pdfjs-dist一起使用：

function pdfMerge(urls, divRootId) {
    //necessário pois para manter as promisses sincronizadas com await
    (async function loop() {
        for (url_item of urls) {
            console.log("loading: " + url_item);
            var loadingTask = pdfjsLib.getDocument(url_item);
            //sem isso fica dessincronizado
            await loadingTask.promise.then(function (pdf) {
                pdf.getMetadata().then(function (metaData) {
                    console.log("pdf (" + urls + ") version: " + metaData.info.PDFFormatVersion); //versão do pdf
                }).catch(function (err) {
                    console.log('Error getting meta data');
                    console.log(err);
                });
                console.log("páginas: " + pdf.numPages);
                let i = 0;
                while (i < pdf.numPages) {
                    var pageNumber = i;
                    pdf.getPage(pageNumber).then(function (page) {
                        var div = document.createElement("div");
                        var documentosDiv = document.querySelector('#' + divRootId);
                        documentosDiv.appendChild(div);
                        var canvas = document.createElement("canvas");
                        div.appendChild(canvas);
                        // Prepare canvas using PDF page dimensions
                        var viewport = page.getViewport({scale: 1, });
                        //var canvas = document.getElementById('the-canvas');
                        var context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        // Render PDF page into canvas context
                        var renderContext = {
                            canvasContext: context,
                            viewport: viewport
                        };
                        var renderTask = page.render(renderContext);
                        renderTask.promise.then(function () {
                            console.log('Page rendered');
                        });
                    });
                    i++;
                }
                // Fetch the first page
            }, function (reason) {
                // PDF loading error
                console.error(reason);
            });
        }
    })();
}

html示例：

<script src="pdf.js"></script>
<script src="pdf.worker.js"></script>

<h1>Merge example</h1>

<div id="documentos-container"></div>

<style>
    canvas {
        border:1px solid black;
    }
</style>

Answer 9

我在浏览器上使用pdfjs实现了这一目标（即使用包裹将其编译到浏览器环境中）

https://github.com/Munawwar/merge-pdfs-on-browser（文件夹pdfjs-approach）

Answer 10

此处 https://codepen.io/hudson-moreira/pen/MWmpqPb 您有一个添加多个 pdf 并将它们合并为一个的工作示例，所有这些都直接从前端使用 Hopding/pdf-lib 库。布局需要一些调整，但在此示例中，可以直接从屏幕动态添加和删除文件。

简而言之，该函数将PDF合并，但在应用该函数之前需要以Uint8Array格式读取它们。

  async function joinPdf() {
  const mergedPdf = await PDFDocument.create();
  for (let document of window.arrayOfPdf) {
      document = await PDFDocument.load(document.bytes);
      const copiedPages = await mergedPdf.copyPages(document, document.getPageIndices());
      copiedPages.forEach((page) => mergedPdf.addPage(page));
  }
  var pdfBytes = await mergedPdf.save();
  download(pdfBytes, "pdfconbined" + new Date().getTime() + ".pdf", "application/pdf");
  }

我们怎样才能使用javascript进行pdf合并

10 个答案: