快捷導(dǎo)航

VUE+ElementUI下載文件的幾種方式(小結(jié))

更新時(shí)間：2023年01月13日 09:50:32 作者：白野澤

本文主要介紹了VUE+ElementUI下載文件的幾種方式(小結(jié))，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

1.創(chuàng)建超鏈接，通過a標(biāo)簽的鏈接向后端服務(wù)發(fā)get請求，接收后端的文件流

<a :href='"/user/downloadExcel"' >下載模板</a>

2.創(chuàng)建iframe的方式

<el-button size="mini" type="text" icon="el-icon-download" @click="handleDownload(scope.row)">下載</el-button>
? ? /* 下載 */
? ? handleDownload(row) {
? ? ? this.loadingOverLay = this.$loading({
? ? ? ? lock: true,
? ? ? ? text: "文件生成中",
? ? ? ? spinner: "el-icon-loading",
? ? ? ? background: "rgba(0,0,0,0.7)",
? ? ? });
? ? ? var elemIF = document.createElement("iframe");
? ? ? elemIF.src = process.env.VUE_APP_BASE_API + "/transcode/download/" + row.id;
? ? ? elemIF.style.display = "none";
? ? ? document.body.appendChild(elemIF);
? ? ? this.loadingOverLay.close();
? ? },

3.對(duì)后端發(fā)的post請求，使用blob格式

<el-button ?size="mini" class="filter-item" type="primary" icon="el-icon-download" @click="handleExport(scope.row)">導(dǎo)出</el-button>
//method方法
handleExport(row){
const url="/user/downloadExcel"
const options = {snapshotTime:formatDate(new Date(row.snapshotTime), 'yyyy-MM-dd hh:mm')}
exportExcel(url,options)
}
/**
?* 封裝導(dǎo)出Excal文件請求
?* @param url
?* @param data
?* @returns {Promise}
?*/
//api.js
export function exportExcel(url, options = {}) {
? return new Promise((resolve, reject) => {
? ? console.log(`${url} 請求數(shù)據(jù)，參數(shù)=>`, JSON.stringify(options))
? ? axios.defaults.headers['content-type'] = 'application/json;charset=UTF-8'
? ? axios({
? ? ? method: 'post',
? ? ? url: url, // 請求地址
? ? ? data: options, // 參數(shù)
? ? ? responseType: 'blob' // 表明返回服務(wù)器返回的數(shù)據(jù)類型
? ? }).then(
? ? ? response => {
? ? ? ? resolve(response.data)
? ? ? ? let blob = new Blob([response.data], {
? ? ? ? ? type: 'application/vnd.ms-excel'
? ? ? ? })
? ? ? ? console.log(blob)
? ? ? ? let fileName = Date.parse(new Date()) + '.xlsx'
? ? ? ? if (window.navigator.msSaveOrOpenBlob) {
? ? ? ? ? // console.log(2)
? ? ? ? ? navigator.msSaveBlob(blob, fileName)
? ? ? ? } else {
? ? ? ? ? // console.log(3)
? ? ? ? ? var link = document.createElement('a')
? ? ? ? ? link.href = window.URL.createObjectURL(blob)
? ? ? ? ? link.download = fileName
? ? ? ? ? link.click()
? ? ? ? ? //釋放內(nèi)存
? ? ? ? ? window.URL.revokeObjectURL(link.href)
? ? ? ? }
? ? ? },
? ? ? err => {
? ? ? ? reject(err)
? ? ? }
? ? )
? })
}

4.導(dǎo)出json文件

1.安裝：

npm install file-saver --save

2.引入：

import FileSaver from 'file-saver'

/**?
?* data: 封裝好的json數(shù)據(jù)?
?* JSON.stringify(data, null, 2): 格式化json數(shù)據(jù) 方便閱讀
?* new Blob(parame1, parame2): 轉(zhuǎn)為Blob文件流.
?* parame1 [] 數(shù)據(jù)源?
?* parame2 文件流類型
?*/
const blob = new Blob([JSON.stringify(data, null, 2)], {type: 'application/json'})
?
/**?
?* FileSaver.saveAs(parame1, parame2) ?瀏覽器保存文件
?* parame1: Blob文件流
?* parame2：文件名
?*/
FileSaver.saveAs(blob, '文件名.json')

到此這篇關(guān)于VUE+ElementUI下載文件的幾種方式(小結(jié))的文章就介紹到這了,更多相關(guān)VUE ElementUI下載文件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: