FileSaver.js实现文件下载

将原有项目的文件的文件下载更改成利用fileserver插件来实现。

具体的实现步骤如下：

1.将js代码加载到项目中
2.利用saveAs保存后台返回的数据

1
2
3
4
// 文件接受
var blob = new Blob([resp.data]);
// 利用FileSaver插件，下载接受的文件
saveAs(blob, '检定申请.pdf’);

应用非常简单但中间遇到了两个问题，花了较长时间解决

1.安裝的問題

利用命令：
npm install file-saver --save
bower install file-saver

加载依赖失败,bower包里面只有.json'文件，并没有.js`文件，并且在index.html中也没有引入依赖。

开始没有找出为什么失败；解决办法，从github上下载下来，手动加入依赖，问题是自己手动引入的项目好像不承认，会自动给你删除依赖

后来又查了一下，发现别人也遇到了相同的问题，
[1.3.6+] Bower distribution is empty，好像是版本问题，在1.3.6以上的版本上配置为空。

解决办法：

bower install file-saver#1.3.4 --save

这个问题解决了挺长时间的，原因是自己找问题的角度不对，开始一直认为自己的安装方式不对，一直查找如何安装依赖。

2.生成PDF一直打不来，有错误

解决办法：$http.get(url, { responseType: “arraybuffer” })
加上参数{ responseType: “arraybuffer” }

原因：

认识responseType 设置该值能够改变响应类型（关键这句话）。就是告诉服务器你期望的响应格式

esponseType值的类型可为如下

值 数据类型
‘’ DOMString (这个是默认类型)
arraybuffer ArrayBuffer对象
blob Blob对象
document Document对象
json JavaScript object, parsed from a JSON string returned by the server
text DOMString

Blob 对象表示一个不可变、原始数据的类文件对象。

Blob 表示的不一定是JavaScript原生格式的数据。File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

Blob(blobParts[, options])

返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。

参考文档
中文文档

推荐文章