vue3 ts pdfjs-dist实现base64 生成本地文件
时间: 2023-07-16 12:15:09 浏览: 183
可以参考以下代码实现:
```typescript
import { PDFDocumentProxy } from 'pdfjs-dist';
import pdfjs from 'pdfjs-dist';
import { saveAs } from 'file-saver';
// 从 base64 字符串加载 PDF 文件
const loadPdfFromBase64 = async (base64: string) => {
const loadingTask = pdfjs.getDocument({ data: atob(base64) });
const pdf: PDFDocumentProxy = await loadingTask.promise;
return pdf;
};
// 将 PDF 文件转换为 Blob 对象
const pdfToBlob = async (pdf: PDFDocumentProxy) => {
const pdfData = await pdf.getData();
return new Blob([pdfData], { type: 'application/pdf' });
};
// 将 Blob 对象保存为本地文件
const saveBlobToFile = (blob: Blob, fileName: string) => {
saveAs(blob, fileName);
};
// 示例
const base64 = 'JVBERi0xLjMKJcfsj6IKNSAwIG9iago8PAovVGl0bGUg...'
const pdf = await loadPdfFromBase64(base64);
const blob = await pdfToBlob(pdf);
saveBlobToFile(blob, 'example.pdf');
```
说明:
1. 使用 `pdfjs-dist` 库加载并解析 PDF 文件;
2. 将解析后的 PDF 文件数据转换为 Blob 对象;
3. 使用 `file-saver` 库将 Blob 对象保存为本地文件。
需要注意的是,`pdfjs-dist` 库在 TypeScript 中的类型定义不太完善,需要手动添加一些类型声明,例如:
```typescript
declare global {
interface Window {
pdfjsLib: typeof pdfjs;
}
}
declare module 'pdfjs-dist' {
const pdfjsLib: typeof pdfjs;
export default pdfjsLib;
}
```
这些类型声明可以添加在项目中任意一个 TypeScript 文件中。另外,由于使用了 `atob` 函数解码 base64 字符串,所以需要将编译选项中的 `lib` 中添加 `dom`。
阅读全文