preface

Due to the need for front-end import and export of Excel, I did not find an out-of-box excel import and export plug-in online. The free version of THE well-known XLSX plug-in in JS could not modify the style, but the professional version that could modify the style costs more than 700 dollars, so I silently looked for other plug-ins. Later found the XLSX-style plug-in but need to modify the source code, are more trouble, so on the Internet to find a lot of big guys after the code, in XLSX and XLSX-style based on a simple package (thank you very much for the big guys selfless dedication of the code), Chinese and English and numbers when mixed according to the character length set the automatic column width, Personally I think this is the most useful, hee hee.

function

  • Support export excel files, and can set column width, border, font, font color, size, alignment, background color and other styles.
  • Import Excel files to generate JSON data. When exporting a large amount of data, you are advised to split the data into multiple files.

demo

Installation

With npm or yarn

yarn add pikaz-excel-js

npm i -S pikaz-excel-js
Copy the code

Ensure that the VUE version is 2.0 or later

For Vue-cli

Export:

Typical use:

<excel-export :sheet="sheet">
   <div>export</div>
</excel-export>
Copy the code

.vue file:

  import {ExcelExport} from 'pikaz-excel-js'. exportdefault {
        components: {
            ExcelExport,
        },
        data () {
          return {
            sheet:[
              [
                title:"Taste of fruit.".tHeader: ["Litchi"."Lemon"].table: [{litchi:"Sweet".lemon:"Acid"}].keys: ["litchi"."lemon"].sheetName:"Taste of fruit.",]]}}...Copy the code

Attributes:

parameter instructions type An optional value The default value
bookType The file format string xlsx/xls xlsx
filename The file name string — excel
sheet Table data. See below for details on the configuration of each table data objectForm the configuration array — —
before-start This hook is used before processing data. The parameters are export file format, file name, table data, or stop export if false is returned function(bookType, filename, sheet) — —
before-export The hook before exporting the file, taking the exported file format, filename, bloB file stream, or stopping the export if false is returned function(bookType, filename, sheet) — —
on-error Failed to export the hook with an error message function(err) — —
Table Parameter Configuration
parameter instructions type An optional value The default value
title Table title, must be used with a table header or multiple table headers, not mandatory string — —
tHeader Table header, non-required item array — —
multiHeader Multilevel header, that is, an array containing multiple header arrays, is not required array — —
table Tabular data array — —
merges Merge cells, and merge header and table superfluous data items with empty strings, not required items array — —
keys The data key must correspond to the table header in sequence array — —
colWidth Column width. If not, the column width is self-adaptive. You are advised to set the column width for a large amount of data array — —
sheetName Table name string — sheet
globalStyle Table global style, specific parameters see belowTable global style object — Table global style
cellStyle Cell style. See below for details on how each cell object is configuredCell style array — —
Table global style
parameter The property name instructions type An optional value The default value
border top {style:’thin’,color:{RGB: “000000”}} object style:thin/medium/dotted/dashed {style:’thin’,color:{ rgb: “000000” }}
right {style:’thin’,color:{RGB: “000000”}} object style:thin/medium/dotted/dashed {style:’thin’,color:{ rgb: “000000” }}
bottom {style:’thin’,color:{RGB: “000000”}} object style:thin/medium/dotted/dashed {style:’thin’,color:{ rgb: “000000” }}
left {style:’thin’,color:{RGB: “000000”}} object style:thin/medium/dotted/dashed {style:’thin’,color:{ rgb: “000000” }}
font name The font string Song/bold /Tahoma, etc Song typeface
sz The shop name number — 12
color Font color, such as: {RGB: “000000”} object — { rgb: “000000” }
bold Whether it is in bold boolean true/false false
italic Whether it is italic boolean true/false false
underline Is there an underscore boolean true/false false
shadow Is there a shadow boolean true/false false
fill fgColor The background color { rgb: “ffffff” } — { rgb: “ffffff” }
alignment horizontal Horizontal alignment string bottom/center/top center
vertical Vertical alignment string bottom/center/top center
wrapText Whether the text is newline boolean true/false false
Cell style
parameter instructions type An optional value The default value
cell Cell name, such as A1 string — —

Other properties are set in the same way as the table global style

Import:

Typical use:

<excel-import :on-success="onSuccess">
   <div>The import</div>
</excel-import>
Copy the code

.vue file:

  import {ExcelImport} from 'pikaz-excel-js'. exportdefault {
        components: {
            ExcelImport,
        },
        methods:{
          onSuccess(data, file){
            console.log(data)
          }
        }
  ...
Copy the code

Attributes:

parameter instructions type An optional value The default value
sheetNames The name of the table to query, for example [‘ plug-in information ‘] Array — —
before-import The hook before the file is imported. The parameter file is the import file function(file) — —
on-progress Hooks for file import function(event,file) — —
on-change A hook that is called when the file state changes, when the file is imported, when the import succeeds, and when the import fails function(file) — —
on-success File import hook with response as generated JSON data function(response, file) — —
on-error A hook for file import failure. Parameter error is an error message function(error, file) — —

Refer to the article

www.jianshu.com/p/31534691e…

www.cnblogs.com/yinxingen/p…

Project Address:Github.com/pikaz-18/pi…

The last

After I wrote the document, I found that the document is really difficult to write. I will never make fun of others’ documents again, haha.