前端文件下载和预览PDF

Axios前景概要：

1、可以使用自定义配置新建一个 axios 实例: axios.create([config])

var instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {
    'X-Custom-Header': 'foobar'
    auth: { // auth表示使用 HTTP 基础验证，并提供凭据
      username: 'janedoe',
      password: 's00pers3cret'
    }
  }
});

auth设置将覆写掉任意使用 headers (axios.defaults.headers.xxx)设置的自定义 Authorization头

2、为方便起见，axios为所有支持的请求方法提供了别名:

axios.get(url\[, config\])
axios.post(url\[, data\[, config\]\])

文件下载：

const ax = axios.create()
function download(url, params) {
  ax.get({ // 通过Axios发起请求下载文件
    methods: 'get',
    url,
    params,
    responseType: 'blob' // 表示服务器响应的数据类型，可以是
    //'arraybuffer', 'blob', 'document', 'json', 'text', 'stream',默认json
  }).then({
    const hd = resp.headers['content-disposition']
    let fileName = 'download';
    if (hd) {
      const temp = hd.split(';')[1]
      fileName = decodeURIComponent(temp.split('=')[1])
    }
    
    const resType = res.headers['Content-Type']
    if (resType.indexOf('application/json') != -1) {
      alert('后台返回的是JSON报错信息')
    } else {
      // 非IE下载
      if ('download' in document.createElement('a')) {
        let tagA = document.createElement('a')
        tagA.href = window.URL.createObjectURL(res.data) // 获取当前文件的一个内存URL
        tagA.download = filename // 下载后文件名
        tagA.style.display = 'none'
        document.body.appendChild(tagA)
        tagA.click() // 点击下载
        window.URL.revokeObjectURL(tagA.href) // 释放掉Blob对象
        document.body.removeChilc(tagA) // 下载完成移除元素
      } else {
        // IE10+下载
        window.navigator.msSaveBlob(res.data, fileName) // responseType: 'blob'指定了res.data为Blob对象
      }
    }
  })
}

POST方式下载:

function download(url, params) {
  ax.post(url, params, { responseType: 'blob' }).then(res => {
    // 代码同上
  })
}

预览PDF：

要在网页上显示PDF文件,首先< object >、< embed >、< iframe >这几个标签就能实现PDF文件的预览（无需JavaScript支持），例如：

<div style="height: 400px;">
  <iframe :src="fileUrl" height="100%" width="100%" frameborder="0"></iframe>
</div>

fileUrl（预览文件url）来自文件下载时window.URL.createObjectURL(Blob)方法返回的url。

相关API

URL.createObjectURL(blob)和FileReader.readAsDataURL(file)很相似，

二者区别

• 通过URL.createObjectURL(blob)可以获取当前文件的一个内存URL，同步执行。
• 通过FileReader.readAsDataURL(file)可以获取一段data:base64的字符串, 异步执行。

内存使用

• createObjectURL返回一段带hash的url，并且一直存储在内存中，直到document触发了unload事件（例如：document close）或者执行revokeObjectURL来释放。
• FileReader.readAsDataURL则返回包含很多字符的base64，并会比blob url消耗更多内存，但是在不用的时候会自动从内存中清除（通过垃圾回收机制）

优劣对比：

• 使用createObjectURL可以节省性能并更快速，只不过需要在不使用的情况下手动释放内存
• 如果不太在意设备性能问题，并想获取图片的base64，则推荐使用FileReader.readAsDataURL

Blob, File, URL,FileReader对象说明

• Blob对象就是一个包含有只读原始数据的类文件对象，Blob对象可以看做是存放二进制数据的容器，本身并不能操作二进制数据。要读取里面的二进制数据，需要用FileReader。
• File是Blob的子类，比blob主要多出一个name的属性。存放二进制数据的容器，本身并不能操作二进制数据。
• URL对象用于生成指向File对象或Blob对象的URL，还可以使用base64字符串作为内容的DataURI将一个文件嵌入到文档里。
• FileReader对象就是专门操作二进制数据的，FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。

window.URL对象可以为Blob对象生成一个网络地址，结合a标签的download属性，可以实现点击url下载文件。

通常情况下，File对象是来自用户在一个 <input> 元素上选择文件后返回的FileList对象，也可以是来自由拖放操作生成的 DataTransfer对象。拖放 API 的dataTransfer.files返回的也是一个FileList 对象，它的成员因此也是 File 实例对象。