pdf转图片并下载

一、实现效果

选择本地 pdf 文件上传，会生成 pdf 文件的预览，点击保存功能。

二、所用插件

1. pdf文件相关的文件处理插件：pdfjs-dist@2.3.200
2. zip压缩文件相关的包： jszip@3.5.0
3. 文件保存下载相关的包：file-saver@2.0.2

三、相关代码

vue 中测试

四、相关知识点

1. 使用 FileReader 进行文件读取

（1）创建实例

let fileReader = new FileReader()

（2）方法

（3）事件： FileReader 通过异步的方式读取文件内容，结果均是通过事件回调获取。

2. 使用 canvas 的 toDataURL() 方法返回 包含 data URI 的DOMString

MDN: HTMLCanvasElement.toDataURL()

let canvas = document.getElementById(`canvas`)

// 参数说明：
// 1. type（可选）：图片格式，默认为 image/png
// 2. encoderOptions（可选）：在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量。如果超出取值范围，将会使用默认值 0.92。其他参数会被忽略。
let result = canvas.toDataURL("image/png", 1.0)

3. ArrayBuffer 二进制数组

ArrayBuffer，二进制数组

（1） JS 中的二进制数据格式，例：ArrayBuffer，Uint8Array，DataView，Blob，File 及其他。

基本的二进制对象是 ArrayBuffer —— 对固定长度的连续内存空间的引用。

（2）如要操作 ArrayBuffer，我们需要使用“视图”对象。 视图对象本身并不存储任何东西。它是一副“眼镜”，透过它来解释存储在 ArrayBuffer 中的字节。例如下：

3. Blob

细说Web API中的Blob

（1）概述： Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

（2）创建 Blob 对象

// 参数说明
// 1. blobParts： 数组类型，数组中的每一项连接起来构成Blob对象的数据，数组中的每项元素可以是ArrayBuffer, ArrayBufferView, Blob, DOMString
// 2. options：可选项，字典格式类型，可以指定如下两个属性：

type，默认值为 ""，它代表了将会被放入到blob中的数组内容的MIME类型。
endings，默认值为"transparent"，用于指定包含行结束符\n的字符串如何被写入。 它是以下两个值中的一个： "native"，表示行结束符会被更改为适合宿主操作系统文件系统的换行符； "transparent"，表示会保持blob中保存的结束符不变。

let blob = new Blob(blobParts[, options])

let data1 = "a"
let data2 = { "name": "abc" }

let blob1 = new Blob([data1])
let blob2 = new Blob([JSON.stringify(data4)])
let blob3 = new Blob([data4])

console.log(blob1);  // Blob {size: 1, type: ""}
console.log(blob2);  // Blob {size: 14, type: ""}
console.log(blob3);  // Blob {size: 15, type: ""}

size代表Blob 对象中所包含数据的字节数。这里要注意，使用字符串和普通对象创建Blob时的不同，blob4使用通过JSON.stringify把data4对象转换成json字符串，blob5则直接使用data4创建，两个对象的size分别为14和15。blob4的size等于14很容易理解，因为JSON.stringify(data4)的结果为："{"name":"abc"}"，正好14个字节(不包含最外层的引号)。blob5的size等于15是如何计算而来的呢？实际上，当使用普通对象创建Blob对象时，相当于调用了普通对象的toString()方法得到字符串数据，然后再创建Blob对象。所以，blob5保存的数据是"[object Object]"，是15个字节(不包含最外层的引号)。

（3）Blob 方法： slice()

（4）Blob使用场景

  - 分片上传
  - Blob URL

参考：PDF转成图片
参考：PDF转图片，在线PDF转JPG/PNG