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

Most people do not understand the knowledge points of this article "how to solve the pits encountered in excel using vue", so the editor summarizes the following contents, detailed contents, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "use vue to export excel pits encountered how to solve" article.

Pit requirements encountered in vue Export excel

Export all the current data under Vue+element UI el-table to an excel file.

First follow the method on the Internet to see what kind of holes there are.

Preparatory work

1. Installation dependency: yarn add xlsx file-saver-S

2. Introduce in the placement of components that require export functionality

Import FileSaver from "file-saver"; import XLSX from "xlsx"

3. The setting in HTML is simply to add an id to the table tag el-table to be exported: for example, outTable, corresponding to the document.querySelector in the following exportExcel method ('# outTable')

   / / Export the current table exportCurrent:function () {var wb = XLSX.utils.table_to_book (document.querySelector ('# outTable')) / / Table id var wbout = XLSX.write (wb, {bookType: 'xlsx', bookSST: true, type:' array'}) try {FileSaver.saveAs (new Blob ([wbout], {type: 'application/octet-stream'}) 'sheet.xlsx') / / File name} catch (e) {if (typeof console! = =' undefined') console.log (e, wbout)} return wbout}

Let's take a look at the raw data.

Next, let's take a look at the exported results.

Huh? How did my order number and bank card number become a scientific counting method?

And my time, where are the hours and seconds?

The reason is that the number is too long and you need to use excel text format to display properly.

After various searches, the final solution is as follows:

ExportExcel () {var xlsxParam = {raw: true}; / / when converted to excel, use the original format var wb = XLSX.utils.table_to_book (document.querySelector ("# outTable"), xlsxParam); var wbout = XLSX.write (wb, {bookType: "xlsx", bookSST: true, type: "array"}) Try {FileSaver.saveAs (new Blob ([wbout], {type: "application/octet-stream;charset=utf-8"}), "sheetjs.xlsx");} catch (e) {if (typeof console! = = "undefined") console.log (e, wbout);} return wbout;}

Let's take a look at our data.

The great task has been completed.

Error handling of excel table exported by vue

The Excel export function needs to set the responseType in the request to blob, that is to say, the request can only receive Excel files, and json data cannot be processed.

At this point, it can be judged and processed according to the Content-Type value class of Response. If the value is application/json, the returned data is first converted into a string, and then converted to JSON.

/ / Export downLoad () {const fileReader = new FileReader () / / create the file object const loading = this.$loading ({lock: true, text: 'export loading', spinner: 'el-icon-loading', background:' rgba (0,0,0) 0.7)'}) Const data = {equipmentName: this.searchForm.equipmentName, equipmentCode: this.searchForm.equipmentCode,} Download ('/ api/mfg-mes/equipmentVersion/exportStandardWorkTime', data). Then (res = > {fileReader.onloadend = () = > {/ / definition method if (res.type = 'application/json') {/ / the third step is to determine that const jsonData = JSON.parse (fileReader.result) / / indicates that it is ordinary object data Background conversion failed / / background information / / console.log (jsonData,'fileReader') this.$message.error (jsonData.msg) loading.close () } else {downloadFile (res, 'Information Table', 'xlsx') loading.close ();}} fileReader.readAsText (res)} .catch (err = > {console.log (err)) })}, the above is about the content of this article on "how to solve the holes encountered in exporting excel with vue". I believe you all have some understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.

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.