Warning: file_get_contents(/data/phpspider/zhask/data//catemap/5/ruby-on-rails-4/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript Pdf.js:使用base64文件源而不是url呈现Pdf文件_Javascript_Pdf_Canvas_Base64_Pdf.js - Fatal编程技术网

Javascript Pdf.js:使用base64文件源而不是url呈现Pdf文件

Javascript Pdf.js:使用base64文件源而不是url呈现Pdf文件,javascript,pdf,canvas,base64,pdf.js,Javascript,Pdf,Canvas,Base64,Pdf.js,我正在尝试使用pdf.js呈现来自pdf的页面 通常,使用url,我可以执行以下操作: PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) { // // Fetch the first page // pdf.getPage(1).then(function getPageHelloWorld(page) { var scale = 1.5;

我正在尝试使用pdf.js呈现来自pdf的页面

通常,使用url,我可以执行以下操作:

PDFJS.getDocument("http://www.server.com/file.pdf").then(function getPdfHelloWorld(pdf) {
  //
  // Fetch the first page
  //
  pdf.getPage(1).then(function getPageHelloWorld(page) {
    var scale = 1.5;
    var viewport = page.getViewport(scale);

    //
    // Prepare canvas using PDF page dimensions
    //
    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
    //
    page.render({canvasContext: context, viewport: viewport});
  });
});
但在本例中,我的文件是base64,而不是url:

data:application/pdf;base64,JVBERi0xLjUKJdDUxdgKNSAwIG9iaiA8PAovTGVuZ3RoIDE2NjUgICAgICAKL0ZpbHRlciAvRmxhdGVEZWNvZGUKPj4Kc3RyZWFtCnjarVhLc9s2...
如何做到这一点?

来源于

因此,标准XMLHttpRequest(XHR)用于检索文档。 问题是XMLHttpRequests不支持数据:URI(例如数据:application/pdf;base64,JVBERi0xLjUK…)

但也有可能将类型化Javascript数组传递给函数。 您只需要将base64字符串转换为Uint8Array。您可以使用位于的此功能


使用接受的答案检查IE并将dataURI转换为UInt8Array;PDFJS接受的表格
Ext.isIE?pdfAsDataUri=me.convertDataURIToBinary(pdfAsDataUri):“”;
convertDataURIToBinary:函数(dataURI){
var BASE64_MARKER=';BASE64',
base64Index=dataURI.indexOf(BASE64\u MARKER)+BASE64\u MARKER.length,
base64=dataURI.substring(base64Index),
原始=window.atob(base64),
rawLength=raw.length,
array=新的Uint8Array(新的ArrayBuffer(rawLength));
对于(变量i=0;i},直接支持base64编码,尽管我自己没有测试过。获取base64字符串(从文件派生或使用任何其他方法、POST/GET、websockets等加载),使用atob将其转换为二进制,然后在PDFJS API上将其解析为getDocument,如
PDFJS.getDocument({data:base64PdfData})
Codetoffel answer对我来说确实很好。

所以可以获取pdf的二进制文件,并使用pdf在pdf查看器中显示它。js@Codetoffel帮我省了几个小时干得好。但是,如果源是通过对arraybuffer或blob的RESTful调用检索到的PDF呢?我在这里发布了一个问题:如果您处于
严格模式
,请不要忘记
var
之前的
I=0
!我白白浪费了1小时。:)我让它工作。我的答案是,我已经使用nodejs包和
PDFJS.getDocument({data:Buffer.from(pdf_base64,'base64'))测试了它。
/**
 * This is the main entry point for loading a PDF and interacting with it.
 * NOTE: If a URL is used to fetch the PDF data a standard XMLHttpRequest(XHR)
 * is used, which means it must follow the same origin rules that any XHR does
 * e.g. No cross domain requests without CORS.
 *
 * @param {string|TypedAray|object} source Can be an url to where a PDF is
 * located, a typed array (Uint8Array) already populated with data or
 * and parameter object with the following possible fields:
 *  - url   - The URL of the PDF.
 *  - data  - A typed array with PDF data.
 *  - httpHeaders - Basic authentication headers.
 *  - password - For decrypting password-protected PDFs.
 *
 * @return {Promise} A promise that is resolved with {PDFDocumentProxy} object.
 */
var BASE64_MARKER = ';base64,';

function convertDataURIToBinary(dataURI) {
  var base64Index = dataURI.indexOf(BASE64_MARKER) + BASE64_MARKER.length;
  var base64 = dataURI.substring(base64Index);
  var raw = window.atob(base64);
  var rawLength = raw.length;
  var array = new Uint8Array(new ArrayBuffer(rawLength));

  for(var i = 0; i < rawLength; i++) {
    array[i] = raw.charCodeAt(i);
  }
  return array;
}
var pdfAsDataUri = "data:application/pdf;base64,JVBERi0xLjUK..."; // shortened
var pdfAsArray = convertDataURIToBinary(pdfAsDataUri);
PDFJS.getDocument(pdfAsArray)