Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼
正常導(dǎo)出是后端來(lái)做,我們?nèi)フ{(diào)用后端接口,會(huì)返回給我們文件(前端即:axios請(qǐng)求,設(shè)置responseType: 'blob',然后創(chuàng)建一個(gè)a標(biāo)簽,通過(guò)window.URL.createObjectURL將blob轉(zhuǎn)為一個(gè)路徑,為a標(biāo)簽增加download屬性,給其一個(gè)文件名稱,執(zhí)行click事件即可下載);但是沒(méi)有后端的情況下怎么做呢?下面來(lái)簡(jiǎn)單介紹一下:
首先安裝兩個(gè)插件
npm i file-saver -S npm i xlsx -S
封裝一下
method.js
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'
// 導(dǎo)出Excel(根據(jù)表格當(dāng)前的數(shù)據(jù)進(jìn)行導(dǎo)出)
export function exportExcel1(dom, fileName) {
// 前面這五行代碼作用就是去掉導(dǎo)出重復(fù)的表 就是導(dǎo)出的時(shí)候我這邊會(huì)導(dǎo)出兩個(gè)一樣的表格,可能是因?yàn)橛覀?cè)的fixed導(dǎo)致的,所以在導(dǎo)出的時(shí)候要?jiǎng)h除掉
let tableDom = dom.cloneNode(true)
let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
let elTableFixed = tableDom.querySelector(".el-table__fixed")
if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
if(elTableFixed) tableDom.removeChild(elTableFixed);
let wb = XLSX.utils.table_to_book(tableDom, { raw: true })
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
} catch(e) {
console.error(e, wbout, '----->>>')
}
}
// 導(dǎo)出Excel (根據(jù)數(shù)據(jù) 自定義導(dǎo)出 一般表格會(huì)分頁(yè)展示數(shù)據(jù),如果按照上面的方式 只會(huì)導(dǎo)出當(dāng)前頁(yè)的,如果想導(dǎo)出所有數(shù)據(jù) 就使用該方法)
export function exportExcel(tableList, fileName) {
let tableData = [['故障報(bào)警', '設(shè)備名稱', '故障內(nèi)容', '系統(tǒng)', '狀態(tài)', '開(kāi)始時(shí)間', '結(jié)束時(shí)間']]
tableList.forEach(item => {
tableData.push([ item.alarm, item.equipname, item.point, item.system, item.status, item.starttime, item.endtime ])
})
let ws = XLSX.utils.aoa_to_sheet(tableData)
let wb = XLSX.utils.book_new()
XLSX.utils.book_append_sheet(wb, ws)
let wbout = XLSX.write(wb, {
bookType: 'xlsx',
bookSST: true,
type: 'array'
})
try {
FileSaver.saveAs( new Blob([wbout], { type: "application/octet-stream" }), fileName);
} catch(e) {
console.error(e, wbout, '----->>>')
}
}
// 暫時(shí)沒(méi)用下面這兩個(gè)方法(也是可以的)
// 將一個(gè)sheet轉(zhuǎn)成最終的excel文件的blob對(duì)象,然后利用URL.createObjectURL下載
export function sheet2blob(dom, sheetName) {
// 前面五行代碼作用就是去掉導(dǎo)出重復(fù)的表 就是導(dǎo)出的時(shí)候我這邊會(huì)導(dǎo)出兩個(gè)一樣的表格,可能是因?yàn)橛覀?cè)的fixed導(dǎo)致的,所以在導(dǎo)出的時(shí)候要?jiǎng)h除掉
let tableDom = dom.cloneNode(true)
let elTableFixedRight = tableDom.querySelector(".el-table__fixed-right")
let elTableFixed = tableDom.querySelector(".el-table__fixed")
if(elTableFixedRight) tableDom.removeChild(elTableFixedRight);
if(elTableFixed) tableDom.removeChild(elTableFixed);
const sheet = XLSX.utils.table_to_sheet(tableDom);//將一個(gè)table對(duì)象轉(zhuǎn)換成一個(gè)sheet對(duì)象
sheetName = sheetName || 'sheet1';
var workbook = {
SheetNames: [sheetName],
Sheets: {}
};
workbook.Sheets[sheetName] = sheet; // 生成excel的配置項(xiàng)
var wopts = {
bookType: 'xlsx', // 要生成的文件類型
bookSST: false, // 是否生成Shared String Table,官方解釋是,如果開(kāi)啟生成速度會(huì)下降,但在低版本IOS設(shè)備上有更好的兼容性
type: 'binary'
};
var wbout = XLSX.write(workbook, wopts);
var blob = new Blob([s2ab(wbout)], {
type: "application/octet-stream"
}); // 字符串轉(zhuǎn)ArrayBuffer
function s2ab(s) {
var buf = new ArrayBuffer(s.length);
var view = new Uint8Array(buf);
for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
return buf;
}
return blob;
}
export function openDownloadDialog(url, saveName) {
if (typeof url == 'object' && url instanceof Blob) {
url = URL.createObjectURL(url); // 創(chuàng)建blob地址
}
var aLink = document.createElement('a');
aLink.href = url;
aLink.download = saveName || ''; // HTML5新增的屬性,指定保存文件名,可以不要后綴,注意,file:///模式下不會(huì)生效
var event;
if (window.MouseEvent) event = new MouseEvent('click');
else {
event = document.createEvent('MouseEvents');
event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
}
aLink.dispatchEvent(event);
}組件中使用(按需引入)
<el-button icon="el-icon-download" @click="downloadTpl()" size="small">導(dǎo)出</el-button> <el-table id="myTable" :data="dataList" size="medium" border @selection-change="selectionChangeHandle" v-loading="loading" class="table" > <!-- ... --> </el-table>
import { exportExcel, sheet2blob, openDownloadDialog } from './method'
export default {
methods: {
// 導(dǎo)出
exportExcel() {
exportExcel(document.getElementById('myTable'), '故障及報(bào)警.xlsx')
//這個(gè)只需要 XLSX 庫(kù) 應(yīng)該也是可以的,我這邊暫時(shí)沒(méi)用
// openDownloadDialog(sheet2blob(document.getElementById('myTable')), '故障及警.xlsx')
}
}
}以上就是Vue無(wú)后端配合實(shí)現(xiàn)導(dǎo)出功能的示例代碼的詳細(xì)內(nèi)容,更多關(guān)于Vue導(dǎo)出功能的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
el-table表格點(diǎn)擊該行任意位置時(shí)也勾選上其前面的復(fù)選框
本文主要介紹了在el-table組件中實(shí)現(xiàn)雙擊表格某一行任意位置自動(dòng)勾選復(fù)選框的功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-02-02
vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式(推薦)
這篇文章主要介紹了vue3中storeToRefs讓store中的結(jié)構(gòu)出來(lái)的數(shù)據(jù)也能變成響應(yīng)式,本文通過(guò)實(shí)例代碼給大家介紹的分需要的朋友可以參考下2024-09-09
Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個(gè)好的項(xiàng)目開(kāi)始搭建總是需要配置許多初始化配置,本文就來(lái)介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價(jià)值,感興趣的可以了解一下2024-02-02
淺談Vue為什么不能檢測(cè)數(shù)組變動(dòng)
這篇文章主要介紹了淺談Vue為什么不能檢測(cè)數(shù)組變動(dòng),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò)(示例代碼)
這篇文章主要介紹了element的表單校驗(yàn)證件號(hào)規(guī)則及輸入“無(wú)”的情況校驗(yàn)通過(guò),使用方法對(duì)校驗(yàn)數(shù)據(jù)進(jìn)行過(guò)濾判斷,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2023-11-11
vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能
這篇文章主要介紹了vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
基于element-ui中el-select下拉框選項(xiàng)過(guò)多的優(yōu)化方案
這篇文章主要介紹了基于element-ui中el-select下拉框選項(xiàng)過(guò)多的優(yōu)化方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
Vue3+Uniapp實(shí)現(xiàn)環(huán)境多語(yǔ)言方案完整介紹
本文主要介紹了Vue3 Uniapp環(huán)境下的多語(yǔ)言實(shí)現(xiàn)方案,核心思路是通過(guò)人為翻譯后將內(nèi)容存儲(chǔ)在 JSON 文件中,當(dāng)用戶選擇語(yǔ)言時(shí)調(diào)用對(duì)應(yīng)文件實(shí)現(xiàn)多語(yǔ)言切換,需要的小伙伴可以了解下2025-08-08

