javascript - Pdf.js 和viewer.js。将流或 blob 传递给查看器

Question

我在寻找解决方案时遇到了麻烦:我以这种方式使用 Javascript 从 SQL 文件流字段检索 PDF blob(这是一个 lightswitch 项目)

var blob = new Blob([screen.WebReportsPdfFilesStream.selectedItem.Pdf], { type: "application/pdf;base64" });

我有 blob，我什至可以将其转换为文件流或 base64(“JVBERi0.....”或“%PDF 1.6 ......”等)

到目前为止没有问题。

现在我需要在查看器中显示它。我更喜欢查看器在新窗口中打开，但我愿意以某种方式将其嵌入到我的页面中。

我想知道是否可以直接将 blob 或流传递给查看器并显示文档。我尝试过类似的事情

PDFView.open(pdfAsArray, 0)

在这种情况下，嵌入式查看器中没有任何反应。

pdfAsArray 很好，因为我可以在同一页面内将流附加到 Canvas 上来显示它。我只想显示查看器，而不是将 PDF 嵌入到 Canvas 中，也可能嵌入到新窗口中。

任何人都可以提供几行代码来说明如何在 Javascript 中实现这一目标吗？

Answer 1

我正在使用PDFJS.version = '1.0.1040'; PDFJS.build = '997096f';

帮助我加载 Base64 pdf 数据的代码是这样的:

function (base64Data) {
  var pdfData = base64ToUint8Array(base64Data);
  PDFJS.getDocument(pdfData).then(function (pdf) {
    pdf.getPage(1).then(function (page) {
      var scale = 1;
      var viewport = page.getViewport(scale);
      var canvas = document.getElementById('myCanvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      page.render({ canvasContext: context, viewport: viewport });
    });
  });

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

该函数可以是 api 调用 Promise 的成功函数。我在这里所做的是将 pdf 渲染到 Canvas 元素 myCanvas 上。

<canvas id="myCanvas"></canvas>

这显示了 pdf 的第一页，但没有任何功能。我明白为什么观众会受到欢迎。如果我将其连接到查看器(viewer.html/viewer.js)，我将编辑我的答案。

编辑:如何吸引观众

1 在 bower.json 中，添加 "pdfjs-viewer": "1.0.1040"

2 HTML:

<iframe id="pdfViewer" src="lib/pdfjs-viewer/web/viewer.html" style="width: 100%; height: 700px;" allowfullscreen="" webkitallowfullscreen=""></iframe>

3更改viewer.js文件中愚蠢的默认文档:

var DEFAULT_URL = '';

4 Controller :

var pdfjsframe = document.getElementById('pdfViewer');
pdfjsframe.onload = function() {
  LoadPdfDocument();
};

$scope.myApiCallThatReturnsBase64PdfData.then(
  function(base64Data) {
    $scope.base64Data = base64Data;
    LoadPdfDocument();
  },
  function(failure) {

    //NotificationService.error(failure.Message);

  });

function LoadPdfDocument() {
  if ($scope.PdfDocumentLoaded)
    return;
  if (!$scope.base64Data)
    return;

  var pdfData = base64ToUint8Array($scope.base64Data);
  pdfjsframe.contentWindow.PDFViewerApplication.open(pdfData);

  $scope.PdfDocumentLoaded = true;
}

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