①首先下載 FileSaver.js 插件???

npm install file-saver --save

②在需要的.vue頁面引入

import { saveAs } from 'file-saver'

?在HTML中引入

<script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>

 //FileSaver.js只有一個函數(shù)就是saveAs，它有三個參數(shù)，
 //第一個是：Blob、File、Url    可以是二進制流、文件、URL的地址。
 //第二個是：文件的名字
 //第三個是：可選的object對象。

 // 示例
 saveAs(參數(shù)一,參數(shù)二, 參數(shù)三)

③ 如果想保存一個TXT文檔本地

save(){
   let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
   saveAs(blob, "hello world.txt");
}

// "Hello, world!"   是文件的內(nèi)容
// "hello world.txt" 是文件的名字

結(jié)果：

?

內(nèi)容：

?

?④ 如果想保存一個圖片

save(){
  saveAs('https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', "image.jpg")
}

// 注意：通過URL保存圖片時，存在阿里云服務(wù)端的圖片必須設(shè)置為允許跨域，
//       因為在通過saveAs函數(shù)下載時，會請求一次這個地址，如果沒設(shè)置，則會出現(xiàn)跨域問題。

結(jié)果：

?圖片內(nèi)容：

?如果圖片不允許跨域則會出現(xiàn)這種情況：

?

⑤下面這個方法則可以完美的解決跨域問題，不光可以下載圖片還可以下載PDF文件等其他文件。

    download() {
      axios.post("/mth-finance-capital-service/api/common/download/file", {data:this.fileUrl}, {
        headers: {"Content-Type": 'application/octet-stream'},
        transformRequest: [function (data, headers) {
          return data['data']
       }],
       responseType: 'blob'
      }).then(response => {

      //  const contentType = response.headers['content-type']
      //  const blob = new Blob([response.data], {type: contentType})
      // 這地方是前端進行的 blob轉(zhuǎn)換，接口里面后端做了之后，我們就不需要再做了。

        saveAs(response.data, this.fileUrlName) 

      // saveAs(blob, this.fileUrlName)  要是前端轉(zhuǎn)換的話就用這個

      }).catch(error => {
        console.log("----",error)
        // 處理錯誤
      })
    },

// 1. 直接發(fā)送axios請求，第一個是請求地址。
// 2. 第二個是圖片或者其他文件的URL鏈接；這地方必須要用{}包起來，data是形參最好也加上。
// 3. headers: {"Content-Type": 'application/octet-stream'},請求頭
// 4. transformRequest: [function (data, headers) {  return data['data']  }],
//    表示允許在向服務(wù)器發(fā)送前，修改請求數(shù)據(jù)，data就是上面的形參。
// 5. responseType: 'blob' 后端返回的圖片是二進制流的形式，所以要加這個。
// 6. this.fileUrlName 是文件的名字

⑥ 調(diào)接口的原因是，讓后端把要下載的圖片URL或者其他文件的URL，做一下轉(zhuǎn)換，轉(zhuǎn)成blob類型的。

這個是響應(yīng)成功后，.then里面response的信息。

?最后調(diào)用，saveAs(response.data, this.fileUrlName)下載即可。

⑦ 結(jié)果：?? // 文件名是第二個參數(shù)，我隨便起的

?返回這樣結(jié)果不要在意，到文件里打開圖片就好了

打開之后的圖片

?

?

⑧要是出現(xiàn)圖片破損的情況：

?

?請檢查發(fā)請求時 是否攜帶了 responseType: 'blob' ，要下載的圖片鏈接是否用{}包起來了，回到步驟⑤看看。文章來源地址http://www.zghlxwxcb.cn/news/detail-740563.html

到了這里，關(guān)于vue中，給一個URL地址，利用FileSaver.js插件下載文件到本地的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！