前端下载pdf文档（支持doc/excel/ppt/pdf/jpg、png等）

一、前端有后台返回的各种文档在服务器上的链接地址，实现点击下载文件

1.以a链接点击下载文件列表

<a v-for=“item in tips.filemaintains” :href="${item.filepath}" :download="${item.filename}" @click=“emitEvent(item.event, item)”>{{item.filename}}

使用a标签的download属性来下载文档，其中pdf和图片，谷歌浏览器默认打开，因为有内置pdf浏览器，到不到点击就下载的效果

2.download.js
地址：
https://www.npmjs.com/package/downloadjs
download.js 使用 当只有文件的链接地址时，只需传入地址一个参数，可以实现文件下载（包括pdf和图片）。
原理在于：
download.js是其他方法的集大成者。为了解决最为让人头大的图片自动打开的问题，脚本内通过创建xhr请求，把响应类型改成blob,让浏览器无法识别从而避免直接打开，之后再把下载的到的blob文件重新拼装成我们需要的文件。针对不同浏览器的兼容性，使用了a标签下载，window.open等方法作为降级方案。
弊端在于：
<1>未能成功修改需要下载的文件名称，也就是下载下来的文件名称只能是地址里的名称，不能修改。
注意不支持中文路径和文件名的下载
<2>传入url作为参数时，只支持同源的资源或者服务器配置了CORS支持跨域（因为使用了xhr请求）
3.downloadjs已经是集大成者，但是项目中的文件地址中的文件名称与下载要显示的文件名不是同一个时，且文件名称是中文时 ，就没有办法使用，此时以下代码便能解决你的问题：

function downloadFile(record, fileName) {
  var request = new XMLHttpRequest();
  request.responseType = "blob";//定义响应类型
  request.open("GET", ServerIP + record);
  request.onload = function () {
    var url = window.URL.createObjectURL(this.response);
    var a = document.createElement("a");
    document.body.appendChild(a);
    a.href = url;
    a.download = fileName
    a.click();
  }
  request.send();
}

原理同样是脚本内通过创建xhr请求，把响应类型改成blob,让浏览器无法识别从而避免直接打开，之后再把下载的到的blob文件重新拼装成我们需要的文件。
弊端：只支持同源的资源或者服务器配置了CORS支持跨域（因为使用了xhr请求）
当你的前后台资源都是同源的，便可以解决你的问题。

二、文件流下载文件

当下载文件通过后台返回的文件流下载时，前台接受文件流，便可以下载了，接受流的方式后续再补充吧。