网络

120 阅读1分钟

vue文件下载

image.png
注意事项: 在写这个的时候,由于content没找对,导致写了好长时间,content应该是上图中的数据样子。由于我在请求时做了封装直接就返回了res.data,导致content为undinfed然后出错。

    download () {
      if (this.isDown) return
      //下载文件比较耗时,防止在这期间多次点击
      this.isDown = true
      exportData({
        start_time: this.timeData[0],
        end_time: this.timeData[1]
      }).then(res => {
        const content = res
        const blob = new Blob([content])
        // for no-IE
        if ('download' in document.createElement('a')) {
          const link = document.createElement('a')
          //下载文件名称
          link.download = `${this.timeData[0]}--${this.timeData[1]}-AlarmEvent.xlsx`
          link.style.display = 'none'
          //创建下载链接
          link.href = URL.createObjectURL(blob)
          document.body.appendChild(link)
          link.click()
          // 释放链接
          URL.revokeObjectURL(link.href)
          document.body.removeChild(link)
        } else { // for IE
          navigator.msSaveBlob(blob)
        }
        // 由于获取异常比较难,采取type不是指定类型就输出报错信息
        if (res.type !== 'application/x-xlsx') {
          this.$message.error("导出失败!")
        }
        this.isDown = false
      }).catch(err => {
        this.isDown = false
        this.$message.error(err.message)
      })
    }
// 请求封装
export function exportData(data) {
  return request({
    url: "xxx",
    method: "post",
    responseType: 'blob',
    data,
  })
}

另一种使用axios发送请求

      axios({
        url: "xxx",
        method: "post",
        responseType: 'blob',
        data: {
          start_time: this.timeData[0],
          end_time: this.timeData[1],
          token: window.sessionStorage.getItem('token')
        },
      }).then(res => {..} ).catch(err => {..} ) //后面一样

别人访问本地前端文件

  • 通过cmd输入命令ipconfig[参考],获取本地ip地址(blog.csdn.net/weixin_3425…)
  • 然后在vue2.0中的config->index.js,将host改成本地的ip地址
  • 运行后将该链接发给同一个局域网内的人,就可以直接访问了

EventSource

服务端向客户端发送数据