vue—-csv转json

1.npm install codepage (将在package.json文件内可查到“codepage”: “^1.15.0”,)
2.再可用的.vue文件引入：
<div>
<div>import * as excel from '../../utils/excel'</div>
<div>import { isUTF8, fixdata } from '../../utils/isU'</div>
<div>import * as cptable from 'codepage';</div>
</div>

<div><strong>../../utils/excel内容如下：</strong></div>

<div>
<div>/* eslint-disable */</div>
<div>// @ts-nocheck</div>
<div>import * as XLSX from 'xlsx'</div>
<div> </div>
<div>function auto_width(ws, data){</div>
<div>    /*set worksheet max width per col*/</div>
<div>    const colWidth = data.map(row => row.map(val => {</div>
<div>        /*if null/undefined*/</div>
<div>        if (val == null) {</div>
<div>            return {'wch': 10};</div>
<div>        }</div>
<div>        /*if chinese*/</div>
<div>        else if (val.toString().charCodeAt(0) > 255) {</div>
<div>            return {'wch': val.toString().length * 2};</div>
<div>        } else {</div>
<div>            return {'wch': val.toString().length};</div>
<div>        }</div>
<div>    }))</div>
<div>    /*start in the first row*/</div>
<div>    let result = colWidth[0];</div>
<div>    for (let i = 1; i < colWidth.length; i++) {</div>
<div>        for (let j = 0; j < colWidth[i].length; j++) {</div>
<div>            if (result[j]['wch'] < colWidth[i][j]['wch']) {</div>
<div>                result[j]['wch'] = colWidth[i][j]['wch'];</div>
<div>            }</div>
<div>        }</div>
<div>    }</div>
<div>    ws['!cols'] = result;</div>
<div>}</div>
<div> </div>
<div>function json_to_array(key, jsonData){</div>
<div>    return jsonData.map(v => key.map(j => { return v[j] }));</div>
<div>}</div>
<div> </div>
<div>// fix data,return string</div>
<div>function fixdata(data) {</div>
<div>    let o = ''</div>
<div>    let l = 0</div>
<div>    const w = 10240</div>
<div>    for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))</div>
<div>    o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))</div>
<div>    return o</div>
<div>}</div>
<div> </div>
<div>// get head from excel file,return array</div>
<div>function get_header_row(sheet) {</div>
<div>    const headers = []</div>
<div>    const range = XLSX.utils.decode_range(sheet['!ref'])</div>
<div>    let C</div>
<div>    const R = range.s.r /* start in the first row */</div>
<div>    for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */</div>
<div>        var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */</div>
<div>        var hdr = 'UNKNOWN ' + C // <-- replace with your desired default</div>
<div>        if (cell && cell.t) hdr = XLSX.utils.format_cell(cell)</div>
<div>        headers.push(hdr)</div>
<div>    }</div>
<div>    return headers</div>
<div>}</div>
<div> </div>
<div>export const export_table_to_excel= (id, filename) => {</div>
<div>    const table = document.getElementById(id);</div>
<div>    const wb = XLSX.utils.table_to_book(table);</div>
<div>    XLSX.writeFile(wb, filename);</div>
<div>}</div>
<div> </div>
<div>export const export_json_to_excel = ({data, key, title, filename, autoWidth}) => {</div>
<div>    const wb = XLSX.utils.book_new();</div>
<div>    data.unshift(title);</div>
<div>    const ws = XLSX.utils.json_to_sheet(data, {header: key, skipHeader: true});</div>
<div>    if(autoWidth){</div>
<div>        const arr = json_to_array(key, data);</div>
<div>        auto_width(ws, arr);</div>
<div>    }</div>
<div>    XLSX.utils.book_append_sheet(wb, ws, filename);</div>
<div>    XLSX.writeFile(wb, filename + '.xlsx');</div>
<div>}</div>
<div> </div>
<div>export const export_array_to_excel = ({key, data, title, filename, autoWidth}) => {</div>
<div>    const wb = XLSX.utils.book_new();</div>
<div>    const arr = json_to_array(key, data);</div>
<div>    arr.unshift(title);</div>
<div>    const ws = XLSX.utils.aoa_to_sheet(arr);</div>
<div>    if(autoWidth){</div>
<div>        auto_width(ws, arr);</div>
<div>    }</div>
<div>    XLSX.utils.book_append_sheet(wb, ws, filename);</div>
<div>    XLSX.writeFile(wb, filename + '.xlsx');</div>
<div>}</div>
<div> </div>
<div>export const read = (data, type) => {</div>
<div>    /* if type == 'base64' must fix data first */</div>
<div>    // const fixedData = fixdata(data)</div>
<div>    // const workbook = XLSX.read(btoa(fixedData), { type: 'base64' })</div>
<div>    const workbook = XLSX.read(data, { type: type });</div>
<div>    const firstSheetName = workbook.SheetNames[0];</div>
<div>    const worksheet = workbook.Sheets[firstSheetName];</div>
<div>    const header = get_header_row(worksheet);</div>
<div>    const results = XLSX.utils.sheet_to_json(worksheet);</div>
<div>    return {header, results};</div>
<div>}</div>
<div> </div>
<div>export default {</div>
<div>  export_table_to_excel,</div>
<div>  export_array_to_excel,</div>
<div>  export_json_to_excel,</div>
<div>  read</div>
<div>}</div>
<div>
<div><strong>../../utils/isU内容如下：</strong></div>
<div>
<div>
<div>// @ts-nocheck</div>
<div>export function isUTF8(bytes) { //非中文格式CSV文件转换UTF-8方法</div>
<div>    var i = 0;</div>
<div>    while(i < bytes.length) {</div>
<div>        if(( // ASCII</div>
<div>                bytes[i] == 0x09 ||</div>
<div>                bytes[i] == 0x0A ||</div>
<div>                bytes[i] == 0x0D ||</div>
<div>                (0x20 <= bytes[i] && bytes[i] <= 0x7E)</div>
<div>            )) {</div>
<div>            i += 1;</div>
<div>            continue;</div>
<div>        }</div>
<div>        if(( // non-overlong 2-byte</div>
<div>                (0xC2 <= bytes[i] && bytes[i] <= 0xDF) &&</div>
<div>                (0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF)</div>
<div>            )) {</div>
<div>            i += 2;</div>
<div>            continue;</div>
<div>        }</div>
<div>        if(( // excluding overlongs</div>
<div>                bytes[i] == 0xE0 &&</div>
<div>                (0xA0 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)</div>
<div>            ) ||</div>
<div>            ( // straight 3-byte</div>
<div>                ((0xE1 <= bytes[i] && bytes[i] <= 0xEC) ||</div>
<div>                    bytes[i] == 0xEE ||</div>
<div>                    bytes[i] == 0xEF) &&</div>
<div>                (0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)</div>
<div>            ) ||</div>
<div>            ( // excluding surrogates</div>
<div>                bytes[i] == 0xED &&</div>
<div>                (0x80 <= bytes[i + 1] && bytes[i + 1] <= 0x9F) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF)</div>
<div>            )</div>
<div>        ) {</div>
<div>            i += 3;</div>
<div>            continue;</div>
<div>        }</div>
<div>        if(( // planes 1-3</div>
<div>                bytes[i] == 0xF0 &&</div>
<div>                (0x90 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)</div>
<div>            ) ||</div>
<div>            ( // planes 4-15</div>
<div>                (0xF1 <= bytes[i] && bytes[i] <= 0xF3) &&</div>
<div>                (0x80 <= bytes[i + 1] && bytes[i + 1] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)</div>
<div>            ) ||</div>
<div>            ( // plane 16</div>
<div>                bytes[i] == 0xF4 &&</div>
<div>                (0x80 <= bytes[i + 1] && bytes[i + 1] <= 0x8F) &&</div>
<div>                (0x80 <= bytes[i + 2] && bytes[i + 2] <= 0xBF) &&</div>
<div>                (0x80 <= bytes[i + 3] && bytes[i + 3] <= 0xBF)</div>
<div>            )</div>
<div>        ) {</div>
<div>            i += 4;</div>
<div>            continue;</div>
<div>        }</div>
<div>        return false;</div>
<div>    }</div>
<div>    return true;</div>
<div>}</div>
<div>export function fixdata(data) { //文件流转BinaryString</div>
<div>  var o = "",</div>
<div>      l = 0,</div>
<div>      w = 10240;</div>
<div>  for (; l < data.byteLength / w; ++l) o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)));</div>
<div>  o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)));</div>
<div>  return o;</div>
<div>}</div>
<div> </div>
</div>
</div>
<div><strong>.vue文件内容如下：</strong></div>
<div>
<div>
<div><el-upload</div>
<div>            ref="uploadRef"</div>
<div>            :on-change="handleChange"</div>
<div>            :auto-upload="false"</div>
<div>            :show-file-list="false"</div>
<div>            style="float:left"</div>
<div>          ></div>
<div>            <template #trigger></div>
<div>              <el-button type="primary">批量添加</el-button></div>
<div>            </template></div>
<div>          </el-upload></div>
<div> </div>
<div><strong>methods内容如下：</strong></div>
<div>
<div>
<div>handleChange(uploadFileObj:any) {</div>
<div>      let file = uploadFileObj.raw;</div>
<div>      console.log(file);</div>
<div>      if (!file) return;</div>
<div>      const fileExt = file.name.split('.').pop().toLocaleLowerCase()</div>
<div>      this.readFile(file);</div>
<div>      return false</div>
<div>    },</div>
<div>    readFile(file:any) {</div>
<div>      const reader = new FileReader()</div>
<div>      reader.readAsArrayBuffer(file)</div>
<div>      reader.onloadstart = e => {</div>
<div>      }</div>
<div>      reader.onprogress = e => {</div>
<div>      }</div>
<div>      reader.onerror = e => {</div>
<div>      }</div>
<div>      reader.onload = e => {</div>
<div>        let data = (e.target?.result) as any;</div>
<div>        let dat = new Uint8Array(data);</div>
<div>        let wb;</div>
<div>        let f = isUTF8(dat);</div>
<div>        if (!f) {</div>
<div>           // @ts-ignore</div>
<div>          let str = cptable.utils.decode(936, dat);</div>
<div>          data = excel.read(str, 'string');</div>
<div>        }</div>
<div>        if (f) {</div>
<div>          data = excel.read(btoa(fixdata(data)), 'base64')</div>
<div>        }</div>
<div>        let { header, results } = data;</div>
<div>        console.log(data);</div>
<div>        const tableTitle = header.map((item:any) => { return { title: item, key: item } })</div>
<div>        let listData = results.map((v: any) => {</div>
<div>          return {</div>
<div>          name: v['备件名称'],</div>
<div>          type:  v['备件类型'],</div>
<div>          model:  v['规格型号'],</div>
<div>          amount:  v['入库数量（个）'],</div>
<div>          manufacturer:  v['生产厂家'],</div>
<div>          manufacturerContact: v['厂家联系方式']</div>
<div>        }</div>
<div>        })</div>
<div>        this.listData=listData</div>
<div>        console.log("listDatalistDatalistDatalistData", this.listData)</div>
<div>        console.log("最后接口看看", results)</div>
<div>      }</div>
<div>    },</div>
</div>
</div>
</div>
</div>
</div>
<div> </div>
</div>
本文来自余倩倩投稿，不代表 PmTemple 立场，如若转载，请注明出处：
。如有涉及侵权行为，请发送相关证明材料至邮箱admin@pmtemple.com