一、Vue導出Excel文件內容
Vue導出Excel文件有時會用於將表格數據導出到Excel文件中。因此，我們需要列出要導出的數據的細節，以便我們快速輕鬆地完成導出。
為了將數據導出到Excel文件中，我們將使用以下重要組件：
<template>
<div>
<vue-excel-export
:data="tableData"
:columns="tableColumns"
:sheet-name="'data'"
:file-name="'table-data'"
:auto-width="true">
<el-button>導出表格數據</el-button>
</vue-excel-export>
</div>
</template>
<script>
import VueExcelExport from 'vue-excel-export';
export default {
components: { VueExcelExport },
data() {
return {
tableColumns: [
{ title: '姓名', key: 'name' },
{ title: '年齡', key: 'age' },
{ title: '地址', key: 'address' }
],
tableData: [
{ name: '小明', age: 20, address: '北京市海淀區' },
{ name: '小紅', age: 18, address: '上海市黃浦區' },
{ name: '小剛', age: 25, address: '廣州市天河區' }
]
};
}
};
</script>
此示例說明了如何設置要顯示的表格數據以及列標題。數據被綁定到vue-excel-export，文件名可以用於文件的名稱，而sheet-name則可以用於設置工作表的名稱。
二、Vue導出Excel文件報錯403
在Vue中導出Excel，我們有時會遇到403錯誤代碼。這可能是因為伺服器框架禁止GET請求時導致的問題。解決此問題的方法是將useJquery選項設置為true。
<template>
<div>
<vue-excel-export :data="data"
:columns="columns"
:sheet-name="'data'"
:file-name="'file'"
:use-jquery="true">
<el-button>導出</el-button>
</vue-excel-export>
</div>
</template>
三、Vue導出Excel文件加水印
有時我們需要在Excel文件中添加水印以保護我們的數據。我們可以使用FileSaver以及canvas-context-draw在Vue中添加水印。
<script>
import html2canvas from 'html2canvas';
import JSZip from 'jszip';
import { saveAs } from 'file-saver';
const exportTable = (tableElement, fileName = 'file', options = {}) => {
const zip = new JSZip();
const folder = zip.folder('files');
const fileBaseName = fileName.replace('.xlsx', '');
const sheetOptions = {
sheetid: 'sheet1',
headers: true,
};
const sheet = XLSX.utils.table_to_sheet(tableElement, sheetOptions);
const range = XLSX.utils.decode_range(sheet['!ref']);
for (let C = range.s.c; C {
const tableHeight = tableElement.clientHeight || tableElement.offsetHeight || tableElement.scrollHeight;
const tableWidth = tableElement.clientWidth || tableElement.offsetWidth || tableElement.scrollWidth;
canvas.width = tableWidth;
canvas.height = tableHeight;
ctx.drawImage(image, 0, 0);
ctx.font = '20px Calibri';
ctx.fillStyle = options.color || 'rgba(200, 200, 200, 0.25)';
ctx.rotate(-Math.PI / 4);
ctx.fillText(options.text || 'CONFIDENTIAL', -tableWidth / 3, tableHeight / 2);
const dataURL = canvas.toDataURL('image/png');
const dataBlob = dataURLtoBlob(dataURL);
folder.file(`${fileBaseName}.xlsx`, xlsx, { binary: true });
folder.file(`${fileBaseName}.png`, dataBlob, { binary: true });
zip.generateAsync({ type: 'blob' }).then(content => {
saveAs(content, `${fileBaseName}.zip`);
});
};
image.src = URL.createObjectURL(new Blob([xlsx], { type: 'application/octet-stream' }));
};
const dataURLtoBlob = dataURL => {
const BASE64_MARKER = ';base64,';
if (dataURL.indexOf(BASE64_MARKER) === -1) {
const parts = dataURL.split(',');
const contentType = parts[0].split(':')[1];
const raw = parts[1];
return new Blob([raw], { type: contentType });
}
const parts = dataURL.split(BASE64_MARKER);
const contentType = parts[0].split(':')[1];
const raw = window.atob(parts[1]);
const rawLength = raw.length;
const uInt8Array = new Uint8Array(rawLength);
for (let i = 0; i {
this.$refs.table.style.display = 'none';
document.body.appendChild(canvas);
exportTable(canvas, 'table-data', options);
});
}
}
};
</script>
四、Vue導出Excel文件亂碼
當我們的Excel文件中包含中文字元時，可能會遇到導出時出現亂碼的問題。解決這個問題的方法是在導出的時候設置文件編碼。
<template>
<div>
<vue-excel-export :data="tableData" :columns="tableColumns" :file-name="'table-data'"
:file-type="'xlsx;charset=UTF-8'">
<el-button>導出Excel</el-button>
</vue-excel-export>
</div>
</template>
在此示例中，我們將打開UTF-8編碼格式的文件。您可以將文件類型設置為其他文件類型，例如「xls」或「PDF」。
五、Vue導出Excel文件需要什麼組件
導出Excel文件需要依賴以下組件：
- vue
- file-saver
- jszip
- table-to-sheet
- xlsx
- vue-excel-export
您可以使用以下命令安裝這些組件：
npm i vue file-saver jszip table-to-sheet xlsx vue-excel-export
六、Vue導出Excel文件加標題
如果您需要在Excel中添加標題，可以在表格頂部添加標題行。此示例使用表格數據和表格列作為數據源。
<template>
<div>
<vue-excel-export :data="tableData" :columns="tableColumns" :sheet-name="'data'"
:file-name="'table-data'">
<template slot="title">
<tr>
<th colspan="{{tableColumns.length}}">{{title}}</th>
</tr>
</template>
<el-button>導出Excel文件</el-button>
</vue-excel-export>
</div>
</template>
<script>
export default {
data() {
return {
title: '表格標題',
tableData: [
{ name: '小明', age: 20, address: '北京市海淀區' },
{ name: '小紅', age: 18, address: '上海市黃浦區' },
{ name: '小剛', age: 25, address: '廣州市天河區' }
],
tableColumns: [
{ title: '姓名', key: 'name' },
{ title: '年齡', key: 'age' },
{ title: '地址', key: 'address' }
]
};
}
};
</script>
在此示例中，我們使用了vue-excel-export插槽來添加標題。插槽允許在導出文件時向表格中添加自定義HTML。我們在插槽中添加一個表格行，並使用colspan屬性將所有列合併為一個單元格。
七、Vue導出Excel文件打不開
有時，當我們導出Excel文件時，文件無法打開。這可能涉及到Excel文件的版本和保存方法。
使用「binary」保存Excel文件以解決此問題。
const data = [
{ name: '小明', age: 20, address: '北京市海淀區' },
{ name: '小紅', age: 18, address: '上海市黃浦區' },
{ name: '小剛', age: 25, address: '廣州市天河區' }
];
const wb = XLSX.utils.book_new();
const ws_name = 'SheetJS';
/* Convert JOSN to Worksheet */
const ws = XLSX.utils.json_to_sheet(data);
/* Add row headers */
ws['!rows'] = [{ hpx: 24 }];
/* Add column headers */
ws['!cols'] = [{ wch: 20 }, { wch: 10 }, { wch: 40 }];
/* Add Worksheet to Workbook */
XLSX.utils.book_append_sheet(wb, ws, ws_name);
/* Save Workbook */
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'test.xlsx');
/**
* Convert string to ArrayBuffer
*
* @param s
* @returns {ArrayBuffer}
*/
function s2ab(s) {
const buf = new ArrayBuffer(s.length);
const view = new Uint8Array(buf);
for (let i = 0; i < s.length; ++i) {
view[i] = s.charCodeAt(i) & 0xFF;
}
return buf;
}
在此示例中，我們使用XLSX.write方法將工作簿以二進位格式寫入文件中。在將數據轉換為二進位格式之前，我們使用s2ab函數將數據轉換為ArrayBuffer。
八、Vue導出Excel文件表頭加粗
您可以使用以下CSS樣式來將Excel文件中的首行粗體顯示。
th {
text-align: left;
font-weight: bold;
}
您還可以使用以下示例的命令來將表格標題加粗。
<style scoped>
.excelTableRow th {
font-weight: bold;
}
</style><template>
<div>
<vue-excel-export
:data="tableData"
:columns="tableColumns"
:sheet原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/232228.html
微信掃一掃 
支付寶掃一掃 