仅使用pdf.js打印(不带查看器)

时间:2015-12-04 17:30:15

标签: pdf.js

关于此问题已经有两个问题,但具体问题仍然没有答案。

我有一份多页pdf文件。我已成功使用pdf.js核心将页面写入画布。很快我确定我将有上一个/下一个分页功能,所以我可以看到每一页。 查看我底部的现有代码。我不使用查看器的原因是因为我的老板不喜欢它。他想要一个完全不同的界面,这是非常简单和简单的,我已经成功地构建了减去完整的打印,ala: enter image description here

请注意,pdf文档没有网址。我从api调用中获取数据,返回base64数据。我的代码将数组中的数据加载到pdf中。

我当前的打印功能看起来像是黑客,我知道pdf.js查看器不是这样做的。我想像pdf.js查看器一样打印pdf;意思,真实的形式。我不确定将每个页面转换成图像是否可以完成,但我仍然愿意接受建议。

问题是:原始文档中没有额外的边距,页眉/页脚。更不用说pdf文档实际上可以包含每个页面的不同页面布局和大小,并将图像标记扔进新窗口完全忽略它。

我确实检查了Github上的pdf.js examples。它们都没有打印,他们说不支持使用pdf.js而不支持查看器,如果我们这样做,我们就是自己的(是吗?)。无论如何,谷歌上没有我能找到的东西。

    var pdfDocument;
    var canvas;

     // load from base64 data
    loadPdfDocument(file.Content);

    function print() {
      var doc = document.getElementById('document');
      var html = doc.innerHTML;
      if (canvas)
        html = "<img src='" + canvas.toDataURL() + "'";
      var win = window.open('', '', '');
      win.document.write(html);
      win.document.close();
      win.focus();
      win.print();
      win.close();
    };

    function loadPdfDocument(base64Data) {
      PDFJS.disableWorker = true;
      var pdfData = base64ToUint8Array(base64Data);
      PDFJS.getDocument(pdfData).then(function(pdf) {
        canvas = document.getElementById('pdfPage');
        pdfDocument = pdf;
        loadPdfPage(1);
      });
    }

    function base64ToUint8Array(base64) {
      var raw = atob(base64); // convert base 64 string to raw string
      var uint8Array = new Uint8Array(raw.length);
      for (var i = 0; i < raw.length; i++) {
        uint8Array[i] = raw.charCodeAt(i);
      }
      return uint8Array;
    }

    function loadPdfPage(pageIndex) {
      pdfDocument.getPage(pageIndex).then(function(page) {
        var scale = 1;
        var viewport = page.getViewport(scale);
        var context = canvas.getContext('2d');
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        page.render({
          canvasContext: context,
          viewport: viewport
        });
      });
    }
<div id="document">
  <canvas id="pdfPage" />
</div>

0 个答案:

没有答案