将 pdf URL 转换为 Base64答案

【问题标题】：Convert pdf URL to Base64将 pdf URL 转换为 Base64
【发布时间】：2021-04-03 09:45:08
【问题描述】：

在我的 Angular 应用程序中，我使用以下代码将任何 file 转换为 Base64 字符串。

handleUpload(event) {
    const file = event.target.files[0];
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => {
        console.log(reader.result);
    };
}

在这里，我想即时将 pdf URL 转换为 base64。这是我要转换 base64 的示例 URL。

https://vadimdez.github.io/ng2-pdf-viewer/assets/pdf-test.pdf

【问题讨论】：

标签： angular pdf base64

【解决方案1】：

您可以使用HttpClient 从 url 获取文件。首先你必须在app.module.ts中导入HttpClientModule

import { HttpClientModule } from '@angular/common/http';
imports: [...,
     'HttpClientModule',
       ...]

从'@angular/common/http' 导入您的component.ts HttpClient 并在构造函数中添加实例。

constructor(private http: HttpClient) { }

添加方法

convertToBase64(url: string) {
    this.http.get(url, { responseType: "blob" }).subscribe(blob => {
      const reader = new FileReader();
      const binaryString = reader.readAsDataURL(blob);
      reader.onload = (event: any) => {
        //Here you can do whatever you want with the base64 String
        console.log("File in Base64: ", event.target.result);
      };

      reader.onerror = (event: any) => {
        console.log("File could not be read: " + event.target.error.code);
      };
    });
}

【讨论】：

【解决方案2】：

function getBase64(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
         reader.readAsDataURL(file);
         reader.onload = () => resolve(reader.result);
         reader.onerror = error => reject(error);
    });
}

var file = document.querySelector('#files > input[type="file"]').files[0];
getBase64(file).then(
   data => console.log(data)
);

【讨论】：