Shulou(Shulou.com)06/01 Report--

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.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.