前言

• 在實(shí)際開發(fā)中我們經(jīng)常會(huì)遇見下載文件的場景，比如下載合同，下載文件

• 下載文件有2種方式，一種是后端返回二進(jìn)制流，前端通過blob對象接受根據(jù)不同類型下載

• 還有一種把地址直接在瀏覽器新窗口打開瀏覽器打開pdf可以預(yù)覽和下載，其他文件直接下載

• 但不管是那種方式，原理都是一樣的只是取決于誰來執(zhí)行轉(zhuǎn)化代碼

代碼實(shí)現(xiàn)

1.封裝api-根據(jù)直接后端接口而定（注意要在請求時(shí)標(biāo)明是二進(jìn)制文件流）

// 文件-圖片下載
export function downloadfile (data) {
  return request({
 ?  url: '/download/file',
 ?  method: 'post',
 ?  data,
 ?  // 指定請求類型為二進(jìn)制流
 ?  // 不寫可能會(huì)造成下載成功的圖片和文件是看不到和沒有內(nèi)容的
 ?  responseType: 'blob'
  })
}

2.下載不同文件和圖片在項(xiàng)目中可能經(jīng)常使用-可以封裝成一個(gè)方法。

2.1在utils下創(chuàng)建download.js文件

export default {
 ?  // 下載 Excel 方法
 ?  excel (data, fileName) {
 ? ?  this.download(data, fileName, 'application/vnd.ms-excel')
 ?  },
 ?
 ?  // 下載 Word 方法
 ?  word (data, fileName) {
 ? ?  this.download(data, fileName, 'application/msword')
 ?  },
 ?
 ?  // 下載 Zip 方法
 ?  zip (data, fileName) {
 ? ?  this.download(data, fileName, 'application/zip')
 ?  },
 ?
 ?  // 下載 Html 方法
 ?  html (data, fileName) {
 ? ?  this.download(data, fileName, 'text/html')
 ?  },
 ?
 ?  // 下載 Markdown 方法
 ?  markdown (data, fileName) {
 ? ?  this.download(data, fileName, 'text/markdown')
 ?  },
 ?
 ?  // 下載 pdf 方法
 ?  pdf (data, fileName) {
 ? ?  console.log('data', data)
 ? ?  console.log('fileName', fileName)
 ? ?  this.download(data, fileName, 'application/pdf')
 ?  },
 ?
 ?  // 下載 圖片方法
 ?  png (data, fileName) {
 ? ?  this.download(data, fileName, 'application/png')
 ?  },
 ?
 ?  // 兼容寫法
 ?  stream (data, fileName) {
 ? ?  this.download(data, fileName, 'application/octet-stream')
 ?  },
 ?
 ?  download (data, fileName, mineType) {
 ? ?  // 創(chuàng)建 blob對象
 ? ?  let blob = new Blob([data], { type: mineType })
 ? ?  // 瀏覽器api 有的不支持-二種都寫
 ? ?  window.URL = window.URL || window.webkitURL
 ? ?  // 獲取鏈接地址-(內(nèi)容賦值到臨時(shí)鏈接)
 ? ?  let href = URL.createObjectURL(blob)
 ? ?  // 創(chuàng)建a標(biāo)簽
 ? ?  let downA = document.createElement('a')
 ? ?  // 把鏈接賦值給a標(biāo)簽
 ? ?  downA.href = href
 ? ?  // 賦值文件名稱
 ? ?  downA.download = fileName
 ? ?  // 點(diǎn)擊下載
 ? ?  downA.click()
 ? ?  // 銷毀超連接
 ? ?  window.URL.revokeObjectURL(href)
 ?  }
  }

3.在頁面中使用

// html
<el-button type="info" @click="addclose">下載</el-button>
?
// data
datafile: {
 ? ? ?  url: '文件或者圖片地址'
 ? ?  }
 ? ? ?
// 引入方法
import download from '@/utils/download'
// 方法
// 下載
 ?  async addclose () {
 ? ?  const res = await downloadfile(this.datafile)
?
 ? ?  // 下載圖片
 ? ?  // 針對性的類型-名稱帶不帶.png都不會(huì)受影響
 ? ?  // download.png (res,'測試圖片')
 ? ?  // 帶后綴
 ? ?  // download.png (res,'測試圖片.png')
?
 ? ?  // 下載pdf文件
 ? ?  // 針對性的類型-名稱帶不帶.pdf都不會(huì)受影響
 ? ?  // download.pdf (res,'pdf文件')
 ? ?  // 帶后綴
 ? ?  download.pdf (res,'pdf文件.pdf')
?
 ? ?  // 公共方法
 ? ?  // application/octet-stream 相當(dāng)于公共類型-需要在名稱帶上指定的后綴-不然下載下來的文件沒有后綴名打不開
 ? ?  // download.stream (res,'公共方法.png')
 ? ?  // download.stream (res,'公共方法.pdf')
 ?  }

注意

• 首先排查下載下來的文件格式是否正確，不正確檢查blob對象類型（名稱也有關(guān)系是否帶后綴名）

• 如果發(fā)現(xiàn)下載下來的文件格式后綴正確，內(nèi)容，圖片為空，看不見，排查后端是否把內(nèi)容轉(zhuǎn)成流，前端在封裝api時(shí)是否設(shè)置responseType: 'blob'?

總結(jié)：

經(jīng)過這一趟流程下來相信你也對 vue 后端返回二進(jìn)制流-前端通過blob對象下載文件-圖片 有了初步的深刻印象，但在實(shí)際開發(fā)中我 們遇到的情況肯定是不一樣的，所以我們要理解它的原理，萬變不離其宗。加油，打工人！

什么不足的地方請大家指出謝謝 -- 風(fēng)過無痕文章來源地址http://www.zghlxwxcb.cn/news/detail-752096.html

到了這里，關(guān)于vue 后端返回二進(jìn)制流-前端通過blob對象下載文件-圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！