使用 pdf.js 通过文件流方式加载pdf文件
关于Pdf.js的基础知识，请参考我的博客[*]使用 pdf.js 在网页中加载 pdf 文件
[*]使用 pdf.js 跨域问题的处理方法
上面两篇博客中介绍的内容都是基于直接加载远程服务器中静态PDF文件（即URL地址）来渲染PDF的，实际业务场景中，如与第三方系统对接过程中，第三方系统不直接公开PDF的URL地址，而是通过接口提供PDF文件流，这种方式处理起来就相对麻烦一点。本篇文章详细介绍使用Pdf.js插件通过读取pdf文件流的方式来渲染PDF文件。
先看效果
点击按钮打开PDF渲染页面
下面介绍实现的完整流程
第1步：编写WebAPI接口，返回PDF文件流
假设pdf文件在服务器的D盘测试目录下，通过File.OpenRead()方法读取并返回pdf文件流。
1 using Microsoft.AspNetCore.Mvc; 2 3 namespace SparkWuTong.WebApiX6.Controllers; 4 5 6 "api//")] 7 public class FileTestController : ControllerBase 8 { 9 10 11 public async Task<IActionResult> ReadFileStream()12 {13 var filePath = "D:\\测试\\发票.pdf";14 var stream = System.IO.File.OpenRead(filePath);15 var result = new FileStreamResult(stream, "application/octet-stream")16 {17 FileDownloadName = "发票.pdf" // 可选：设置下载文件名18 };19 20 return await Task.FromResult(result);21 }22 }
还有另外一种情况，读取远程服务器中PDF文件，如下示例
1 using Microsoft.AspNetCore.Mvc; 2 3 namespace SparkWuTong.WebApiX6.Controllers; 4 5 6 "api//")] 7 public class FileTestController : ControllerBase 8 { 9 10 11 public async Task<IActionResult> ReadFileStream()12 {13 var fileUrl = "http://localhost:5600/plugins/pdf-js/test_file.pdf";14 HttpClient client = new HttpClient();15 var stream = await client.GetStreamAsync(fileUrl);16 17 return new FileStreamResult(stream, "application/octet-stream")18 {19 FileDownloadName = "测试文件.pdf" // 可选：设置下载文件名20 };21 }22 }
提示：两种读取pdf文件的方式都可以使用，具体依赖于实际应用场景。
第2步：基于jQuery ajax 封装读取接口并返回文件流的方法
jQuery是大家开发中最常用的脚本库之一，其中 ajax() 方法的能力超级强大，经常用于发送 get/post请求服务器的资源，绝大部分情况下响应格式为 application/json。如果发送请求到上述WebAPI接口是无法正常接收数据的，因为接口返回内容的是文件流。为了能够接收到文件流，这里需要做特殊的配置：
[*] 核心1：（1515行）设置 mimeType 为 text/plain; charset=x-user-defined 意思是将以普通文本的格式接收 WebAPI 返回的内容（非常规的 application/json）。
[*] 核心2：（1518 至 1524行）接收到 data 数据后，将其转换为 pdf.js 库中定义的 Uint8Array 类型。实现思路参考 pdf.js 中的方法。
[*]核心3：（1527行）利用浏览器的File对象将字节数组转换为pdf文件，类型为 application/pdf;charset-UTF-8。
[*]核心4：（1528行）为pdf文件创建一个临时访问的地址。格式为 blob:http://localhost:5600/75f4c795-52fb-4aaa-9204-9744e92649abjiang
将生成的blob地址拷贝到浏览器中访问，并不能成功。
----------------------------------------------------------------------------
URL.createObjectURL() 方法会根据传入的参数创建一个指向该参数对象的URL。这个URL的生命仅存在于它被创建的这个文档里，新的对象URL指向执行的File对象或者是Blob对象。
语法格式为
objectURL = URL.createObjectURL(blob || file);
[*]参数：
File对象或者Blob对象
[*]
[*]File对象就是一个文件，比如我用input type="file"标签来上传文件，那么里面的每个文件都是一个File对象。
[*]Blob对象就是二进制数据，比如通过new Blob()创建的对象就是Blob对象。又比如,在XMLHttpRequest里，如果指定responseType为blob，那么得到的返回值也是一个blob对象。
[*]注意点：
每次调用createObjectURL的时候，一个新的URL对象就被创建了。即使你已经为同一个文件创建过一个URL，如果你不再需要这个对象，要释放它，需要使用URL.revokeObjectURL()方法。当页面被关闭，浏览器会自动释放它，但是为了最佳性能和内存使用，当确保不再用得到它的时候,就应该释放它。
有的同学会说为什么一定要求用jQuery ajax()呢，确实还有很多其他便捷的方法来读取文件流，比如 fetch()方法就非常的简单
1 var newPdfUrl = 'http://localhost:5610/api/FileTest/ReadFileStream'; 2 fetch(newPdfUrl) 3 .then(function (response) { 4 if (response.ok) { 5 return response.arrayBuffer(); 6 } 7 else { 8 spark.alertErrorX("从服务器获取pdf文件失败！"); 9 }10 })11 .then(buffer => {12 // TODO 13 })14 .catch(function (err) {15 log('------插件读取pdf文件发生异常：' + err);16 });
还有原生的 XMLHttpRequest 对象也可以直接读取文件流
1 var xhr = new XMLHttpRequest(); 2 xhr.open('GET', pdfUrl, true); 3 xhr.responseType = 'blob'; 4 xhr.onreadystatechange = function () { 5 if (xhr.readyState !== 4) { 6 return; 7 } 8 9 var status = xhr.status;10 if ((status >= 200 && status < 300) || status === 304) {11 // TODO 12 }13 };14 xhr.send();
第3步：利用 pdf.js 的 viewer.html 渲染文件
[*]12行，定义一个iframe，用于加载pdf.js中提供的示例页面 view.html。
[*]32行，将第2步中创建的blob url 赋值给 view.html 页面的 file 参数。
完成以上步骤后，在网页中即可完整的渲染pdf文件了
页:
[1]