Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how vue reads local excel files". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

I want to read a local xlsx file (task_list.xlsx) and display it on the web page. At first, I choose to create an express server, which is achieved by sending an axios request, but I think it is too complicated to read a local file. Finally, I read the local file through the "xlsx" module + axios without the need for the backend. The steps are as follows:

1. Create a new project through vue-cli:

two。 Write a script to analyze excel workbook

/ src/scripts/read_xlsx.js

Const XLSX = require ('xlsx') / / convert rows and columns to function transformSheets (sheets) {var content = [] var content1 = [] var tmplist = [] for (let key in sheets) {/ / the workbook data read out is difficult to read and converted to json format Refer to https://github.com/SheetJS/js-xlsx#utility-functions tmplist.push (XLSX.utils.sheet_to_json (sheets [key]) .length) content1.push (XLSX.utils.sheet_to_json (sheetskey))} var maxLength = Math.max.apply (Math) Tmplist) / / perform row-column conversion for (let y in [... Array (maxLength)]) {content.push ([]) for (let x in [... Array (tmplist.length)]) {try {for (let z in content1 [x] [y]) {content [y] .push (content1 [x] [y] [z])} catch (error) {content [y] .push ('') } content.unshift ([]) for (let key in sheets) {content [0] .push (key)} return content} export {transformSheets as default}

3. Create a new component

/ src/components/task_list.vue

{{err}}

{{h}} {{item}} import axios from 'axios'import XLSX from' xlsx'import transformSheets from'. / scripts/read_xlsx' / / Import the conversion function export default {name: 'TaskList', data: function () {return {content:', / / initialize the data err:''}} Created () {var url = "/ task_list.xlsx" / / files placed in the public directory can directly access / / read binary excel files, refer to https://github.com/SheetJS/js-xlsx#utility-functions axios.get (url, {responseType:'arraybuffer'}) .then ((res) = > {var data = new Uint8Array (res.data) var wb = XLSX.read (data) {type: "array"}) var sheets = wb.Sheets this.content = transformSheets (sheets)}) .catch (err = > {this.err = err})}}

It's done. Compile and deploy to the server.

Npm run build

Deployment will not be detailed, just throw the dist directory on the server.

This is the end of the content of "how vue reads local excel files". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.