PDFProcessor新功能：不下载，直接预览pdf

2022/6/23 近期的一些计划，关于发布开源包到npm_董厂长的博客-CSDN博客最近的一些工作都是在搞pdf文件的处理，整合了各种各样的包（pdf.js, pdf-lib, downlaod.js...）,以及自己写and抄了各种各样的工具函数（arrayBufferToFile, checkFileType, ArrayBufferToBase64...），熟悉了各种平常用不到接口（canvas, blob...）毕设只是对pdf上绘制canvas层做了一些研究，工作之后开始真正处理pdf了。不如做一些有意义的事情吧。基于已有的业务对代码进行抽象，封装成一个工具类，再整合一些通用的phttps://blog.csdn.net/dongnihao/article/details/125436397?spm=1001.2014.3001.5502File转base64的封装(回调函数形式)，以及如何通过base64判断数据源的类型_董厂长的博客-CSDN博客_file转base64最近的task都是文件流的上传下载各种转。主要是涉及File转base64简要思路就是：FileReader读取文件，通过readAsURL方法，获得一个base64类型的流看了看网上别人的封装：自己的实现其实可以封装一个callback回调函数该方法接受一个FIle类型的文件 和 一个callback回调函数先将文件读取为base64格式 再给fileReader对象添加load完成事件，执行回调。此时拿到的是base64的字符串，比较好处理。顺便一提，很多时候需要对base64字符串处理，获https://blog.csdn.net/dongnihao/article/details/125393704?spm=1001.2014.3001.5502今天产品提出来的新需求，要求不下载直接打开。

🤔ReadAsURL！

  //直接打开pdf 不下载
  // 交互方式：直接通过浏览器tag打开 不再下载
  // 逻辑：Base64 -> utf8 DtatArray ->  Unicode 编码 -> Blob -> url打开Blob
  // 参数 eg. String Base64 , "application.pdf"
  static viewPDFWithoutDownl(fileContent: string,fileType: string) {
    const contentTemp = fileContent.split(',');
    const content = contentTemp[1];
    const bytes = window.atob(content);
    const dataArray = new Uint8Array(bytes.length);
    for (let i = 0; i < bytes.length; i++) {
        dataArray[i] = bytes.charCodeAt(i);
     }
    const blob = new Blob([dataArray], { type: fileType });
    const url = window.URL.createObjectURL(blob);
    open(url);
    }

atob() 方法用于解码使用 base-64 编码的字符串。

base-64 编码使用方法是 btoa() 。

bytes.charCodeAt( ) 方法返回字符串第一个字符的 Unicode 编码(H 的 Unicode 值)

然后创建一个Blob对象

createObjectURL( )

最后附上仓库链接，持续迭代： <(￣︶￣)↗

 GitHub - TIMPICKLE/pdfProcessor: 用于公司业务，处理PDF的数字签名，持续维护中。

新的思考：🤔

可以进一步优化用户体验，直接打开一个二级框，nzModal。然后内嵌一个pdf.js。简单来说就是把浏览器内置的pdf插件在项目中引用。

之前的做proposal时候研究过pdf.js。其初衷只是想让你预览，所以mozilla完全不提供任何API让你更改pdf。所以拿来仅做预览功能可能会不错。

【Vue】vue中使用pdf，看这篇就够了~_波 吉的博客-CSDN博客_vue-pdf1. 需求  最近接到一个需求，需要在 vue 的 pc 端中嵌入用户帮助手册的PDF文件，且由于是保密文件，因此禁止用户进行打印、下载等相关操作。需要实现出来的需求点如下：PDF展示每一页进行懒加载（或用进度条加载给与用户反馈）禁止打印、下载PDF（或加大用户打印、下载文件的难度成本）2. PDF 组件选型通过查找资料，主流的可以找到的有如下几种方案，其中最为成熟的方案是 vue-pdf vue-pdf 官方文档：较为完善的 vue-PDF 解决方案。vueshowpdf：网络上找https://blog.csdn.net/weixin_42678675/article/details/109736497当时看到别人用vue封装一个pdf处理库，说实话意义不大，功能不强大。

demo如下，预览pdf就直接用的vue库：

GitHub - TIMPICKLE/PDF_Reader_Vue: 研究生毕设，主要是探究canvas层的定位问题。预览地址：https://pdf-reader-75be6.firebaseapp.com/#/