使用 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 [ApiController]
 6 [Route("api/[controller]/[action]")]
 7 public class FileTestController : ControllerBase
 8 {
 9     [HttpGet]
10     [HttpPost]
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 [ApiController]
 6 [Route("api/[controller]/[action]")]
 7 public class FileTestController : ControllerBase
 8 {
 9     [HttpGet]
10     [HttpPost]
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文件了