后台数据流导出excel表，预览pdf分享

## 后台返回数据流格式，前端进行处理，然后excel导出或者pdf预览
* 前端请求代码
  与其他请求不一样的地方，responseType: 'blob'
  请求后台返回的res.data就直接是数据流的形式

  

  * 前端处理blob数据类型
  
  ```
    export function getObjectURL(data) {
      let url = null
      if (window.createObjectURL !== undefined) { // basic
        url = window.createObjectURL(data)
      } else if (window.webkitURL !== undefined) { // webkit or chrome
        url = window.webkitURL.createObjectURL(data)
      } else if (window.URL !== undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(data)
      }
      return url
    }
    // 导出Excel公用方法
    export function excelDown(res, name = '模版文件.xlsx', type) {
      var typ = type || 'application/x-excel'
      var blob = new Blob([res], { type: typ })
      var downloadElement = document.createElement('a')
      var href = getObjectURL(blob)
      downloadElement.href = href
      downloadElement.download = name
      document.body.appendChild(downloadElement)
      downloadElement.click() // 触发a标签的点击事件进行下载
      document.body.removeChild(downloadElement)
      window.URL.revokeObjectURL(href)
    }
  ```
    * 有时候因为后台出错，需要前端拦截提示的操作代码
   ```
    if (res.data.type === 'application/json') {
      this.$message.error(this.$t('handleFailure'))
    } else {
      const fileName = 'data-' + params.startDate + '-' + params.endDate + '-' + new Date().getTime() + '.xlsx'
      excelDown(res.data, fileName)
    }
   ```

  ```
  // 预览pdf
  export function showPdf(res) {
    var blob = new Blob([res])
    var href = getObjectURL(blob)
    // console.log('后台返回处理文件流---', href)
    window.open('/static/pdf/web/viewer.html?file=' + encodeURIComponent(href))
  }
  ```

### 预览pdf的实现相关说明
* 请求采用的是get请求，需要把传参的对象先转成base64格式
  ```
    const getAxios = (url, params, type, token) => {
      const path = url.includes('http') ? url : `${configUrl}${url}`
      return Axios({
        method: 'get',
        url: path,
        params: params,
        responseType: type
      })
    }
  ```
  ```
    printnewOrder(params) {
      const url = '/api/printOrder.do'
      params.token = store.getters.token
      const str = CryptoJS.enc.Utf8.parse(JSON.stringify(params))
      const newParams = {
        requestJson: encodeURI(CryptoJS.enc.Base64.stringify(str))
      }
      // console.log('newParams--', newParams)
      return getAxios(`${configUrl}${url}`, newParams, 'blob')
    }
  ```
* 处理了后台返回的blob数据之后，得到一个pdf文件的路径，如果直接下载的话，可以通用excel表的导出方法，但是预览的话，直接打开是没法预览的，所以要借助插件的实现
* 需要的插件是pdf.js 和 viewer.js  不需要要项目中引入这两个js，其实关键的地方就是window.open的时候，借助于viewerjs里面的viewer.html，用file=的方式在新窗口打开来进行PDF的预览, 处理blob得到的地址要经过encodeURIComponent来对url进行编码
* 这里关键的地方是pdf.js, viewerjs的插件放置位置，要当成静态资源来进行编译，对于vuecli3的项目，index.html放在与src统计的public文件夹里，所以pdf.js和viewer.js相关文件需要放在public里的static文件夹里

* 如果是vuecli2的老项目，index.html直接跟index.html同级，则直接放在src同级的static目录里

* vuecli3里面还有一个地方需要配置一下，才能访问到viewer.html，不然默认访问的是index.html

* 这样处理之后，直接本地运行项目的时候是没有问题的，但是打包部署到服务器上之后，访问不到viewer.html，这个时候这个地址就需要服务器去配置viewer.html的访问地址才可以。