How to use the xlsx plug-in in vue to download excel with content centered by default
This article mainly introduces the "vue how to use the xlsx plug-in to download content in the default center of excel" related knowledge, Xiaobian through the actual case to show you the process of operation, the method of operation is simple and fast, practical, I hope that this "how to use the xlsx plug-in in vue to download content in the default center of excel" article can help you solve the problem.
Overview
This article encapsulates a download excel method, and the default content of the downloaded excel is centered horizontally and vertically.
Required dependent installation
Npm i xlsx
Npm i xlsx-style-medalsoft
Npm i file-saver
Here, xlsx-style-medalsoft this dependence is the Nuggets god fork's xlsx-style dependence, the god is very powerful, to achieve a lot of functions, the original link: click to jump the god link
If you have any questions, go directly to the God link for advice. I can't understand the code that is too powerful.
Text
Dependency is introduced in main.js, and the encapsulation method is mounted to the global vue.
Introduce dependency
Import FileSaver from 'file-saver'
Import XLSX from 'xlsx'
Import XLSXS from 'xlsx-style-medalsoft'
Encapsulate downTable and mount it to vue to facilitate global call
Vue.prototype.downTable = function (tableID,fileName,widthList) {
Let xlsxParam = {raw:true}
/ / tableID is the id name of el-table
Let wb = XLSX.utils.table_to_book (document.querySelector ("#" + tableID), xlsxParam)
/ / widthList is an array of table widths in wpx, which can be passed without passing. Array formats such as [{wpx:140}, {wpx:150}, …]
Let arr = []
If (widthList&&Array.isArray (widthList)) {
Arr=widthList
}
Wb ["Sheets"] ["Sheet1"] ["! cols"] = arr
Let wbs = wb ["Sheets"] ["Sheet1"]
/ / each cell setting is centered
For (const key in wbs) {
If (key.indexOf ("!") = =-1 & & WBS [key] .v) {
WBS [key] .s = {
Alignment: {
Horizontal: "center"
Vertical:'center'
Wrap_text:true
}
}
}
}
/ / get the binary string as output
Let wbout = XLSXS.write (wb, {
BookType: "xlsx"
BookSST:true
Type: "buffer"
})
/ / download
Try {
FileSaver.saveAs (
New Blob ([wbout], {type: "application/octet-stream"})
/ / set the export file name
FileName + ".xlsx"
)
} catch (e) {
If (typeof console! = = "undefined") console.log (e.wbout)
}
Return wbout
}
The method of testing encapsulation
Download the contents of the table below
Code
download
Export default {
Name: 'DownTable'
Components: {
}
Data () {
Return {
TableData: [{
Date: '2016-05-02'
Name: Wang Xiaohu
Address: '1518 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Date: '2016-05-04'
Name: Wang Xiaohu
Address: '1517 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Date: '2016-05-01'
Name: Wang Xiaohu
Address: '1519 Lane, Jinshajiang Road, Putuo District, Shanghai'
}, {
Date: '2016-05-03'
Name: Wang Xiaohu
Address: '1516 Lane, Jinshajiang Road, Putuo District, Shanghai'
}]
}
}
Methods: {
}
}
The content is centered horizontally and vertically, which basically meets our requirements, and you can pass in the width list to make the table look better.
Improve the code
Just click on the event plus the width list array
download
This is the end of the introduction on "how to use the xlsx plug-in in vue to download excel in the middle of the content by default". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.
