javascript 如何打开或下载来自服务的原始PDF文件

yrefmtwq  于 2023-06-28  发布在  Java
关注(0)|答案(2)|浏览(165)

我有一个挑战,从前端解析原始PDF文件。原始PDF文件的结构如下所示

%PDF-1.3 %���� 1 0 obj << /Type /Catalog /Pages 2 0 R /PageMode /UseThumbs>>endobj2obj<</Type /Pages/Kids [ 4 0 R ]/Count 1

我尝试使用ng2-pdf-viewerpdfjs-dist,但它似乎只需要文件的位置,而不是像上面的例子那样以二进制形式存储原始文件。
我已经尝试过使用Angular,我很感激任何形式的帮助。下面是我代码片段。

<pdf-viewer [src]="pdfString" [show-all]="true"></pdf-viewer>
pdfString: string = '%PDF-1.7\n%�І�\n1 0 obj\n<</SubFilter/adbe.pkcs7.'
uhry853o

uhry853o1#

根据文档,如果您的PDF文件存储为BASE64编码的字符串,则可以使用
pdfSrc = atob(pdfString)首先将其转换为二进制字符串。
另一方面,如果你的pdf是一个简单的字符串,你可以使用pdfSrc = btoa(pdfString)
然后使用<pdf-viewer [src]="pdfSrc" [show-all]="true"></pdf-viewer>

dsekswqp

dsekswqp2#

这里的问题是ng2-pdf-viewerpdfjs-dist期望文件位置或结构化数据格式作为源,而不是您试图传递的原始字符串。要解析原始PDF内容,可以使用Blob对象。此对象表示不可变的原始二进制数据,可用于显示PDF内容。下面是如何使用Angular和ng2-pdf-viewer实现这一点:
1.将原始PDF数据转换为Blob对象。
1.从Blob对象创建对象URL。
1.将对象URL作为源传递给ng2-pdf-viewer

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <pdf-viewer [src]="pdfUrl" [show-all]="true"></pdf-viewer>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  pdfUrl: string;

  constructor() {
    const pdfString = '%PDF-1.7 ... (your raw pdf content)';
    const pdfBlob = new Blob([this.base64ToUint8Array(this.b64EncodeUnicode(pdfString))], { type: 'application/pdf' });
    this.pdfUrl = URL.createObjectURL(pdfBlob);
  }

  // Helper method to convert base64 encoded string to Uint8Array
  base64ToUint8Array(base64: string) {
    const binaryString = atob(base64);
    const len = binaryString.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
      bytes[i] = binaryString.charCodeAt(i);
    }
    return bytes;
  }

  // Helper method to convert a raw string to base64 encoded string
  b64EncodeUnicode(str: string) {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
      return String.fromCharCode(Number('0x' + p1));
    }));
  }
}

本例采用原始PDF字符串,以Base64对其进行编码,将其转换为Uint8Array,将其 Package 在Blob中,然后创建可作为源传递给ng2-pdf-viewer的对象URL。这应该允许您在Angular应用程序中渲染PDF。

相关问题