vue中实现PDF文件流预览

代码示例 

 预览接口preview.js

/**
 * 证明预览
 * @param {*} data pdf文件流
 * @returns
 */
export function provePreview(data) {
	return request({
		url: "/layout/api/view",
		method: "post",
		data: data,
		responseType: 'blob',	//一定要设置响应类型，否则页面会是空白pdf
		contentType: "application/json;charset=UTF-8"
	});
}

实现步骤说明

这段代码我定义了一个 blobToJson 的函数，主要是将 Blob 类型的数据转化为 JSON 对象。

 ‍ 实现步骤如下：

1. 创建一个 Promise 对象，用于异步处理数据转换
2. 再创建一个 FileReader 对象，用于读取 Blob 类型的数据
3. 通过 FileReader 对象的 readAsText() 方法，将 Blob 数据以文本形式读取出来，并指定编码格式为 UTF-8
4. 在 FileReader 对象的 onload 方法中，通过 try...catch 将读取到的文本数据解析成 JSON 对象，并将解析后的结果作为 Promise 的 resolve 返回值。若是解析失败，则将错误信息作为 reject 返回值。
5. 若是出现了异常，可使用 Promise 的 catch 方法进行捕获和处理。

clearBox() 方法 

clearBox() 方法：在关闭文件预览时，清空预览区域的内容，以便下次预览文件时重新加载新的内容。

 ‍ 实现步骤如下：

1. 将 viewShow 设置为 false，即隐藏文件预览区域。
2. 通过 document.querySelector("#viewBox") 获取到文件预览区域的 DOM 元素。
3. 使用 while 循环，在文件预览区域内移除所有子元素，直到没有子元素为止。

  showPdfPreview()方法

        showPdfPreview()方法：用于展示PDF文件的预览，并对异常情况进行处理。

        在展示预览之前，先将数据转换成json格式，如果转换过程中出现异常，则显示错误消息并清空文件预览区域；如果转换成功，则进行具体的展示逻辑。

 ‍ 实现步骤如下：

1. 创建一个deal函数，用于处理展示PDF预览的具体逻辑。
2. 在deal函数中，首先调用clearBox方法清空文件预览区域的内容。
3. 将传入的code赋值给组件的code属性，用于在展示预览时进行标识。
4. 调用queryCount方法查询打印次数。
5. 创建一个iframe元素，并设置id为'iframe'，设置frameborder为0。
6. 使用Blob对象将传入的data转换为Blob类型，并设置type为'application/pdf'。
7. 通过URL.createObjectURL方法生成PDF文件的URL。
8. 将生成的PDF URL赋值给iframe的src属性，添加到文件预览区域，并设置宽度和高度为100%。
9. 将iframe添加到文件预览区域中。
10. 将组件的viewShow属性设置为true，显示文件预览区域。
11. 使用try-catch-finally语句对异常进行处理。
12. 在try块中，首先将data转换为json格式，判断是否存在异常。若有异常，显示错误消息并调用clearBox方法清空文件预览区域。
13. 在catch块中，捕获到异常时，显示错误消息并调用clearBox方法清空文件预览区域。
14. 在finally块中，关闭加载状态。

---

XX证明列表展示 

XX证明文件预览效果图