使用downloadjs包正确下载pdf文件

2020年5月15日17:45:07 发表评论 阅读(4,470)

使用downloadjs包正确下载pdf文件

图1

最近业务上有一个下载文件的需求,需要支持png jpg jpeg pdf doc docx文件格式。最后使用了downloadjs这个npm包,在使用的过程中遇到一些问题,比如:pdf文件无法正确下载,具体情况是,成功下载后的pdf文件在浏览器预览,出现上图的提示,然后用Notepad打开此pdf文件,内容是一个文档的线上URL,那么显然是不对的。

通过查看其github项目地址发现最后一次更新在2018年,而且Issues中有人提出了这个问题,想必作者已经没时间维护这个项目,下面我们来手动改造一下吧!

首先

我们通过阅读源码可以看到

使用downloadjs包正确下载pdf文件

图2

上图为伪代码,download函数接收3个参数data(下载的url)strFileName(文件的名字)strMimeType(文件的类型)

通过看第8行代码我们可以知道当在参数只存在url的时候,url为true,然后会进入19行的逻辑内,anchor.href = url语句中,a标签的href属性赋值为url,这里浏览器会对url地址的中文进行编码,导致nchor.href.indexOf(url) === -1,不进入此逻辑,导致无法正确下载pdf。

然后

知道了问题出在这里,我们就可以对症下药,当然解决方法不止一种,此文只介绍我使用的一种方法。

使用encodeURI() 函数对传入的url进行url编码,地址就没有了中文,正常进入if的逻辑块,pdf便可以正确的下载,也可以直接在浏览器打开预览。

写法如下:download(encodeURI(url));

最后

现在各种格式文件已经可以正确的下载,但是由于我们对url做了编码处理,导致下载的文件名字是编码后的名字,很丑:

使用downloadjs包正确下载pdf文件

图3

此时我们可以改变3个地方代码解决这个问题。

1、调用方法改为download(encodeURI(url,file_name)); //传入文件名字

2、图2第8行代码改为url = !strMimeType && payload, //取消对传入名字的限制

3、图2第21行代码改为fileName = strFileName ? strFileName : url.split("/").pop().split("?")[0];  // 如果传入了名字就使用传入的名字

提示

修改了源码后,需要将依赖文件改为本地的文件来调用。

 

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛