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。所以拿来仅做预览功能可能会不错。
demo如下,预览pdf就直接用的vue库: