vue读取excel表格数据

2021-09-27 14:40:23

背景:
需要导入excel，并获取Excel文件中的内容
最后需要的数据格式:

[
 {
 	name:'tom',
	age:18,
	gender:'男'
 },
 {
	name:'candy',
	age:18,
	gender:'女'
 }
]

代码如下:

// template
// 需要使用input type="file"标签,如果想要改变样式,可以设置为透明,再定位到自定义样式的按钮上
<input
        title=""
        type="file"
        id="importBtn"
        @click="handleClick"
        @change="handleImport"
        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,
    application/vnd.ms-excel"
/>

// script
//需要安装XLSX插件  =>  npm i xlsx -S
import XLSX from "xlsx";

data(){
	return {
		importData:[]
	}
}，

methods:{
    // 如果点击上传后按了取消按钮,没有导入文件有可能导致报错,所以需要每次点击清空文件,强制触发change事件
    handleClick() {
      let dom = document.getElementById("importBtn");
      if (dom) {
        dom.value = "";
      }
    },
    handleImport(event) {
      let fileReader = new FileReader();
      var file = event.currentTarget.files[0];
      if (!file) {
        return;
      }
      // 成功回调函数
      fileReader.onload = async (ev) => {
        try {
          let datas = ev.target.result;
          let workbook = XLSX.read(datas, {
            type: "binary",
          });
          
          // excelData为excel读取出的数据,可以用来制定校验条件,如数据长度等
          let excelData = XLSX.utils.sheet_to_json(
            workbook.Sheets[workbook.SheetNames[0]]
          );

          // 将上面数据转换成需要的数据
          let arr = [];
          //item[]中的内容为Excel中数据的表头,上传的数据表头必须根据标题填写,否则无法读取
          excelData.forEach((item) => {
            let obj = {};
            obj.name= item["名字"];
            obj.age= item["年龄"];
            obj.gender= item["性别"];
            arr.push(obj);
          });
          
          this.importData = [...arr];
          // this.importData则为最终获取到的数据
           console.log(this.importData);
        } catch (e) {
          window.alert("文件类型不正确！");
          return false;
        }
      };
      // 读取文件 成功后执行上面的回调函数
      fileReader.readAsBinaryString(file);
    },
}

更多相关内容

vue读取 excel 表格内容

2022-09-21 18:05:08

导入我们要实现的效果是点击按钮，然后选择excel文件，读取excel文件中的内容，并将内容展示到表格中 HTML中的代码 读取excel文件删除 | 修改 js部分的代码 GitHub - SheetJS/sheetjs: SheetJS Community Edition ...

导入

我们要实现的效果是点击<el-button>按钮，然后选择excel文件，读取excel文件中的内容，并将内容展示到<el-table>表格中

HTML中的代码

<div class="excel">
      <el-upload
        class="upload-demo"
        action=""
        :on-change="handleChange"
        :show-file-list="false"
        :auto-upload="false"
      >
        <el-button size="small" type="primary">
          读取excel文件
         </el-button>
      </el-upload>

      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          v-for="item in tabp"
          :key="item"
          :prop="item"
          :label="item"
          width="180"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <a @click="handleDelete(scope.row)">删除</a> |
            <a @click="handelEdit(scope.row)">修改</a>
          </template>
        </el-table-column>
      </el-table>

    </div>

js部分的代码

GitHub - SheetJS/sheetjs: 📗 SheetJS Community Edition -- Spreadsheet Data Toolkit

npm install xlsx

import * as XLSX from "xlsx/xlsx.mjs";

 data() {
    return {
tableData: [],
    fileContent: '',
    file: '',
    data: '',
    tabp: []
           }
        },


methods: {
    handleDelete(item) {
      console.log("handleDelete", item);
    },
    handelEdit(item) {
      console.log("handleDelete", item);
      this.input = item.姓名1;
    },
    // 核心部分代码(handleChange 和 importfile)
    handleChange(file, fileList) {
      this.fileContent = file.raw;
      const fileName = file.name;
      const fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
      if (this.fileContent) {
        if (fileType === "xlsx" || fileType === "xls") {
          this.importfile(this.fileContent);
        } else {
          this.$message({
            type: "warning",
            message: "附件格式错误，请重新上传！",
          });
        }
      } else {
        this.$message({
          type: "warning",
          message: "请上传附件！",
        });
      }
    },
    importfile(obj) {
      this.tableData = [];
      this.tabp = [];
      const reader = new FileReader();
      reader.readAsArrayBuffer(obj);
      reader.onload = () => {
        const buffer = reader.result;
        const bytes = new Uint8Array(buffer);
        const length = bytes.byteLength;
        let binary = "";
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const wb = XLSX.read(binary, {
          type: "binary",
        });
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        for (let i in outdata[0]) {
//表格栏信息
          this.tabp.push(i);
          //i是index，arr[i]是item
        }
        this.tableData = outdata;
      };
    },
}

如果表格头信息是中文也可以 vue可以直接xx.中文拿值

V3 vite 版 html一样

declare module 'xlsx/xlsx.mjs' {

export default any

}

import XLSX from "xlsx/xlsx.mjs";
let tableData = ref([]);
let fileContent = ref("");
let file = ref("");
let data = ref("");
let tabp = ref<any[]>([]);




const handleDelete = function (item: any) {
  console.log("handleDelete", item);
};
const handelEdit = function (item: any) {
  console.log("handleDelete", item.姓名1);
 
};
// 核心部分代码(handleChange 和 importfile)
const handleChange = function (file: any, fileList: any) {
  fileContent.value = file.raw;
  const fileName = file.name;
  const fileType = fileName.substring(fileName.lastIndexOf(".") + 1);
  if (fileContent.value) {
    if (fileType === "xlsx" || fileType === "xls") {
      importfile(fileContent.value);
    } else {
      //   this.$message({
      //     type: "warning",
      //     message: "附件格式错误，请重新上传！",
      //   });
    }
  } else {
    // this.$message({
    //   type: "warning",
    //   message: "请上传附件！",
    // });
  }
};
const importfile = function (obj: any) {
  tableData.value = [];
  tabp.value = [];
  const reader = new FileReader();
  reader.readAsArrayBuffer(obj);
  reader.onload = () => {
    const buffer = reader.result;
    const bytes = new Uint8Array(buffer as any);
    const length = bytes.byteLength;
    let binary = "";
    for (let i = 0; i < length; i++) {
      binary += String.fromCharCode(bytes[i]);
    }
    const wb = XLSX.read(binary, {
      type: "binary",

    });
    const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
    for (let i in outdata[0]) {
      //表格栏信息
      tabp.value.push(i);
      //i是index，arr[i]是item
    }
    tableData.value = outdata;
  };
};

导出

npm install vue-json-excel -S

main.js

import JsonExcel from 'vue-json-excel'

Vue.component('downloadExcel', JsonExcel) //全局注册

或者在vue文件里引入也可

html代码

  <template>
              <download-excel
              class="export-excel-wrapper"
              :data="DetailsForm"
              :fields="json_fields"
              :header="title"
              name="需要导出的表格名字.xls"
            >
              <!-- 上面可以自定义自己的样式，还可以引用其他组件button -->
              <el-button type="success">导出</el-button>
              </download-excel>
              </template>

data

title: "xx公司表格",
 json_fields: {
        "排查日期":'date',
        "整改隐患内容":'details',
        "整改措施":'measure',
        "整改时限":'timeLimit',
        "应急措施和预案":'plan',
        "整改责任人":'personInCharge',
        "填表人":'preparer',
        "整改资金":'fund',
        "整改完成情况":'complete',
        "备注":'remark',
      },
    DetailsForm: [
        {
          date: "2022-3-10",
          details: "卸油区过路灯损坏",
          measure: "更换灯泡",
          timeLimit: "2022-3-21",
          plan: "先使用充电灯代替,贴好安全提醒告示",
          personInCharge: "王xx",
          preparer: "王xx",
          fund: "20元",
          complete: "已完成整改",
          remark: "重新更换了灯泡",
        },
       
      ],

DetailsForm：需要导出的数据
title：表格标题导出时放在表格的第一条和导入同时使用时建议不设置
json_fields：里面的属性是excel表每一列的title的中文版,用多个词组组成的属性名(中间有空格的)要加双引号; 指定接口的json内某些数据下载,若不设置，默认导出源数据的英文对象名
一些常用参数
V3

npm install vue-json-excel3

declare module 'vue-json-excel3'

main.ts

import JsonExcel from "vue-json-excel3";
const app = createApp(App)
app.component("downloadExcel", JsonExcel)
html

<downloadExcel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" name="需要导出的表格名字.xls">

<el-button type="success">导出</el-button>

</downloadExcel>

常用参数和v2一样

收起

展开全文

elementui

vue 读取excel内容

千次阅读 2022-06-02 14:12:45

vue.js读取excel文件方法及组件

tips：

文件地址（按需自己改造去）https://download.csdn.net/download/tdjqqq/85761940

xlsx.js读取日期时，如果默认转成js日期的话，会比正常的时间少43秒，设置日期读取时，直接转成字符串即可，如下图所示，那么转换后的数据就是字符串型日期："2022-05-09"，如果需要到具体时分秒，请自行减43秒。

//转换数据
                    //let tempSheetData = _this.handleGetData(XLSX.utils.sheet_to_json(workSheet))
                    let tempSheetData = XLSX.utils.sheet_to_json(workSheet, {
                        defval: null            //单元格为空时的默认值
                        , raw: false            //使用w的值而不是v
                        , dateNF: 'yyyy-MM-dd'   //日期格式
                    })

1 需要安装如下依赖内容，该依赖也可以导出excel

npm install -S file-saver
npm install -S xlsx
npm install -S xlsx-style
npm install -D script-loader

2 读取excel内容

说明：

excel表必须要有工作表（sheet）,且隐藏的工作表也会一起读取
结果会以对象形式导出
我用的组件是ant-vue
注意，你的上传组件方法，传参中一定要有file，el-element可用on-change，且注意ACTIONS要为空，否则只能读取一次

组件如下：

<template>
    <div class="excel-reader">
        <a-upload name="avatar" class="avatar-uploader" v-loading="loading" :show-upload-list="false"
            :before-upload="handleBeforeUpload">
            <a-button title="读取Excel">
                <a-icon type="file-excel" /> Excel Reader
            </a-button>
        </a-upload>
    </div>
</template>
  
<script>
var XLSX = require('xlsx')
import { readFile } from './excelRreadFile.js'; //读取excel文件方法

export default {
    name: 'ViExcelReader',
    props: {
        allowed: {
            type: Array,
            default () {
                //类型列表
                return [
                    'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'xls', "application/vnd.ms-excel",
                    'csv', "text/csv"]
            },
        },
    },
    data () {
        return {
            loading: false
        }
    },
    // 定义引入的组件
    components: {},
    //变量监听
    watch: {},
    // 页面初始化
    created () { },
    // 页面DOM加载完成
    mounted () {

    },
    //离开页面时执行
    destroyed () { },
    // 页面方法
    methods: {
        async handleBeforeUpload (file) {
            //选择文件后
            let _this = this

            _this.showLoading(true)

            //检测文件类型
            if (!_this.checkFileType(file)) {
                _this.$common.showMsg({
                    type: 'error',
                    content: `抱歉，请选择excel文件`,
                })

                _this.showLoading(false)
                return false
            }

            //选择excel文件后，并读取其内容（文件流）
            let dataBinary = await readFile(file)
            if (dataBinary != null) {
                // 将整个文件以二进制形式读取
                let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })

                // 工作表数量
                let workBookLen = workBook.SheetNames.length
                
                // excel工作簿内容
                let excelBook = []

                //读取每个sheets表
                for (let i = 0; i < workBookLen; i++) {
                    let workSheet = workBook.Sheets[workBook.SheetNames[i]]
                    excelBook.push({
                        sheetName: workBook.SheetNames[i],
                        data: XLSX.utils.sheet_to_json(workSheet, {
                        defval: null            //单元格为空时的默认值
                        , raw: false            //使用w的值而不是v
                        , dateNF: 'yyyy-MM-dd'   //日期格式
                        })
                    })
                }

                _this.showLoading(false)
                console.log({
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })
                //导出工作表内容
                _this.$emit("onChange", {
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })

            }
        },

        showLoading (val) {
            let _this = this
            _this.loading = val
        },
        checkFileType (file) {
            let _this = this

            let flog = false

            //得到上传文件的值
            let fileName = file.name

            //取其类型
            let fileType = fileName.lastIndexOf('.')

            //返回位于String对象中指定位置的子字符串并转换为小写.
            let extension = fileName
                .substring(fileType)
                .toLowerCase()
                .replace('.', '')
            //判断允许上传的文件格式
            if (_this.allowed.includes(extension)) {
                flog = true
            } else {
                flog = false
            }

            return flog
        }
    },
}
</script>
 
<style lang="less" scoped>
.excel-reader {
    display: inline-block;
    .ant-upload-text {
    }
}
</style>

excelRreadFile.js

export const readFile = (file) => {
    return new Promise((resolve) => {
        if (window.FileReader) {
            let reader = new FileReader()
            //将文件读取为二进制码
            reader.readAsBinaryString(file)

            //文件读取成功完成时，若失败，结果为null，否则为读取的结果
            reader.onload = (ev) => {
                resolve(ev.target.result)
            }
        } else {
            //不支持，返回结果为null
            alert('抱歉，您的浏览器，无法支持读取文件功能！')
            resolve(null)
        }
    })
}

只有一张工作表的excel，及结果

有多张工作表的excel，及结果

自动转数据格式版本

<template>
    <div class="excel-reader">
        <a-upload name="avatar" class="avatar-uploader" v-loading="loading" :show-upload-list="false"
            :before-upload="handleBeforeUpload">
            <a-button title="读取Excel">
                <a-icon type="file-excel" /> Excel Reader
            </a-button>
        </a-upload>
    </div>
</template>
  
<script>
var XLSX = require('xlsx')
import { readFile } from './excelRreadFile.js'; //读取excel文件方法

export default {
    name: 'ViExcelReader',
    props: {
        allowed: {
            type: Array,
            default () {
                //类型列表
                return [
                    'xlsx', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
                    'xls', "application/vnd.ms-excel",
                    'csv', "text/csv"]
            },
        },
        transFiled: {
            type: Object,
            default () {
                return {
                    origin: 'zh',
                    target: 'field'
                }
            }
        },
        header: {
            type: Array,
            default () {
                return [{
                    field: 'no',//字段列
                    zh: '序号',//excel的标题
                    en: 'No',//转换的列名
                },
                {
                    field: 'student_name',//字段列
                    zh: '姓名',//excel的标题
                    en: 'student name',//转换的列名
                },
                {
                    field: 'chinese',//字段列
                    zh: '语文',//excel的标题
                    en: 'chinese',//转换的列名
                },
                {
                    field: 'math',//字段列
                    zh: '数学',//excel的标题
                    en: 'math',//转换的列名
                },
                {
                    field: 'english',//字段列
                    zh: '英语',//excel的标题
                    en: 'english',//转换的列名
                },
                {
                    field: 'exam_date',//字段列
                    zh: '考试日期',//excel的标题
                    en: 'exam date',//转换的列名
                },
                ]
            },
        },
        field: {
            type: Array,
            default () {
                return []
            },
        },
    },
    data () {
        return {
            loading: false
        }
    },
    // 定义引入的组件
    components: {},
    //变量监听
    watch: {},
    // 页面初始化
    created () { },
    // 页面DOM加载完成
    mounted () {

    },
    //离开页面时执行
    destroyed () { },
    // 页面方法
    methods: {
        async handleBeforeUpload (file) {
            //选择文件后
            let _this = this

            _this.showLoading(true)

            //检测文件类型
            if (!_this.checkFileType(file)) {
                _this.$common.showMsg({
                    type: 'error',
                    content: `抱歉，请选择excel文件`,
                })

                _this.showLoading(false)
                return false
            }

            //选择excel文件后，并读取其内容（文件流）
            let dataBinary = await readFile(file)
            if (dataBinary != null) {
                // 将整个文件以二进制形式读取
                let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true, cellText: false })

                // 工作表数量
                let workBookLen = workBook.SheetNames.length

                // excel工作簿内容
                let excelBook = []

                //读取每个sheets表
                for (let i = 0; i < workBookLen; i++) {
                    let workSheet = workBook.Sheets[workBook.SheetNames[i]]

                    //转换数据
                    let tempSheetData = []
                    if (Object.keys(_this.transFiled).length == 0 || _this.header.length == 0) {
                        //默认导出，不转换
                        tempSheetData = XLSX.utils.sheet_to_json(workSheet, {
                            defval: null            //单元格为空时的默认值
                            , raw: false            //使用w的值而不是v
                            , dateNF: 'yyyy-MM-dd'   //日期格式
                        })
                    } else {
                        //根据实际情况导出
                        tempSheetData = _this.handleGetData(XLSX.utils.sheet_to_json(workSheet, {
                            defval: null            //单元格为空时的默认值
                            , raw: false            //使用w的值而不是v
                            , dateNF: 'yyyy-MM-dd'   //日期格式
                        }))
                    }

                    excelBook.push({
                        sheetName: workBook.SheetNames[i],
                        data: tempSheetData
                    })
                }

                _this.showLoading(false)
                console.log({
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })
                //导出工作表内容
                _this.$emit("onChange", {
                    name: file.name,
                    length: workBookLen,
                    data: excelBook
                })

            }
        },
        handleGetData (data) {
            //转换数据
            let _this = this
            if (data.length == 0) {
                return []
            }

            let resultArr = []
            data.filter(item => {
                let row = {}
                for (let i in item) {
                    for (let m = 0; m < _this.header.length; m++) {
                        let mItem = _this.header[m]
                        if (mItem[_this.transFiled.origin] == i) {
                            row[mItem[_this.transFiled.target]] = item[i]
                            break
                        }
                    }
                }
                resultArr.push(row)
            })

            return resultArr
        },
        showLoading (val) {
            let _this = this
            _this.loading = val
        },
        checkFileType (file) {
            let _this = this

            let flog = false

            //得到上传文件的值
            let fileName = file.name

            //取其类型
            let fileType = fileName.lastIndexOf('.')

            //返回位于String对象中指定位置的子字符串并转换为小写.
            let extension = fileName
                .substring(fileType)
                .toLowerCase()
                .replace('.', '')
            //判断允许上传的文件格式
            if (_this.allowed.includes(extension)) {
                flog = true
            } else {
                flog = false
            }

            return flog
        }
    },
}
</script>
 
<style lang="less" scoped>
.excel-reader {
    display: inline-block;
    .ant-upload-text {
    }
}
</style>

结论：

千万要注意，隐藏的sheet表也会被读取出来的，且转换后的数据，会以中文为标题出现，有需要的朋友可以转换下对象，否则可能会有问题。

收起

展开全文

vue读取Excel并分组处理数据显示

千次阅读 2021-11-12 20:34:34

Excel数据格式（因处理的特殊性，不像PHPExcel后端读取Excel那样，以A_Z可以获取指定列数据，故此Excel默认增加一行数据，作为key） vue读取Excel数据并分组处理，elementUI表格显示

安装xlsx

Excel数据格式（因处理的特殊性，不像PHPExcel后端读取Excel那样，以A_Z可以获取指定列数据，故此Excel默认增加一行数据，作为key）

第一行相当重要***
在这里插入图片描述

vue数据处理并展示（vue+elementUi）

上传按钮
<el-upload class="upload-demo" ref="upload" action="" :auto-upload="false" :on-change="handleChange"
					:on-error="handelError" :show-file-list="false"
					accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
					<el-button type="success">选择文件批量导入</el-button>
				</el-upload>



<el-table :data="list" style="width: 100%" border :max-height="maxHeight" v-loading="loading"
				element-loading-text="数据导入中">
				<el-table-column type="index" label="序号" width="80">
				</el-table-column>
				<el-table-column prop="o.date" label="配送日期" width="100">
				</el-table-column>
				<el-table-column prop="o.order" label="单号">
				</el-table-column>
				<el-table-column prop="purchase_company" label="采购企业名称 ">
				</el-table-column>
				<el-table-column prop="purchase_address" label="地址">
				</el-table-column>
				<el-table-column prop="contact_username" label="联系人" width="80">
				</el-table-column>
				<el-table-column prop="contact_phone" label="联系电话" width="120">
				</el-table-column>
				<el-table-column prop="o.number" label="商品数量" width="80">
				</el-table-column>
				<el-table-column prop="action_uid" label="操作" width="100">
					<template slot-scope="scope">
						<el-button type="text" @click="dialogTableVisible = true,seeIndex=scope.$index">详情</el-button>
						<el-button @click.native.prevent="deleteRow(scope.$index, list)" type="text" size="small">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>

















handleChange(file, fileList) {
				let that = this
				console.log(file.size)
				console.log(fileList)
				if (file.size > 2000000) {
					that.$message.error("最大上传2M")
					return
				}
				that.loading = true
				that.file = file.raw;
				let reader = new FileReader()
				reader.readAsArrayBuffer(that.file)
				reader.onload = function() {
					let buffer = reader.result
					let XLSX = require('xlsx')
					let wb = XLSX.read(buffer, {
						type: 'binary',
						// cellDates: true
					})
					let outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]])
					var data = [...outdata]
					const arr = []
					data.map(v => {
						const obj = {}
						try {
							if (v['A'] == '购货企业名称') {
								obj.purchase_company = v['B']
								obj.purchase_address = v['D']
								obj.contact_username = v['F']
								obj.contact_phone = v['H']
								arr.push(obj)
							} else if (v['A'] == '订单号') {
								obj.order = v['B']
								obj.date = v['D']
								obj.number = v['F']
								arr[arr.length - 1]['o'] = obj
								arr[arr.length - 1]['p'] = []
							} else if (v['A'] == '商品') {
								obj.code = v['B']
								obj.name = v['C']
								obj.unit = v['D']

								obj.num = v['E']
								obj.price = v['F']
								obj.total = v['G']
								obj.date = v['H']
								obj.batchcode = v['I']

								arr[arr.length - 1]['p'].push(obj)
							}
						} catch (e) {
							//TODO handle the exception
							console.log(e, "e")
						}
					})
					that.loading = false
					// store.commit("setExeclData", arr)
					that.list = arr

				}
			}

收起

展开全文

vue读取excel表格
2020-12-07 11:07:14

vue读取excel表格 安装xlsx npm install xlsx --save-dev 引入插件 import xlsx from 'xlsx' 上传读取 <input type="file" ref="upload" accept=".xls,.xlsx" @change="readExcel

收起

vue
vue 读取本地excel文件
2022-06-29 18:30:34

vue 读取本地excel文件

收起
Vue使用js读取Excel数据
千次阅读 2021-10-28 16:09:04

JS读取Excel数据 1、示例代码 <template> <div class="hello"> <h1>{{ msg }}</h1> <h2>Essential Links</h2> <el-row> <el-col> <el-upload ref=...

收起
vue 2.x 导入excel获取Excel数据
2020-12-22 11:55:01

安装:yarn add file-saveryarn add xlsxyarn add script-loader --dev或者npm安装:npm install -S file-saver xlsx(这里其实安装了2个依赖)npm install-D script-loader在src下创建一个文件夹，包含两个文件：然后...

收起
vue 获取 excel 文件中的数据
2022-06-23 09:58:02

解析excel文件中数据

收起
vue读取本机的excel文件的两种方式
万次阅读 多人点赞 2018-12-03 15:38:36

} readExcel1主函数 // 表格导入 readExcel1(files) { var that = this; console.log(files); // 此处判断不严谨，思路只是根据传入的参数校验数据的完整性，可根据自己需求修改 // 如果没有文件名 if(files.length...

收起
vue+Element-ui实现前端读取 excel 表格数据转换为 JSON 数据进行展示
千次阅读 2019-09-26 14:54:19

vue Element Ui 通过 el-upload 来读取表格文件，借助 XLSX（安装： npm i XLSX -S）来实现读取到的表格转为 JSON 数据格式，然后展示在 el-table 中。 <template> <div>  &...

收起

XLSX vue element
vue导入 excel表格 获取数据
2021-11-25 16:52:37

@vue导入 excel表格 获取数据保存一下，方便以后查看 https://blog.csdn.net/a736755244/article/details/99568133 1、引入依赖 npm install -S file-saver xlsx npm install -D script-loader npm install ...

收起

vue
vue获取excel文件数据
2021-07-01 11:22:08

vue获取excel文件数据并用表格展示 1、安装xlsx paparse及handsontable npm install xlsx npm install papaparse npm install handsontable @handsontable/vue 2、页面引入 import xlsx from 'xlsx' import Papa ...

收起
【Vue 笔记】Vue 读取excel数据并生成数组
2020-12-20 05:14:06

因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据。找了网上的资料后发现js-xlsx可以实现。首先安装依赖：$ npm install xlsxHTML部分：引入：import XLSX from 'xlsx'设置数据：data() {return {outputs:...

收起
vue + exceljs + handsontable 实现导入和编辑demo，包含样式读取
2021-08-11 15:00:15

由于handsontable官方不支持excel导入，在尝试了sheetjs后，发现sheetjs会丢失单元格样式，于是转而使用exceljs完整了实现了Excel的读取和渲染。 handsontable非常强大，能够完全自定义单元格渲染方式和内容，是开发...

收起
Vue Excel导入并读取Excel的数据显示页面以及导出Excel文件
千次阅读 2021-02-23 14:21:07

一、导入Excel 并读取excel的数据 1、使用element的组件el-upload先完成上传excel的步骤(获取上传的file) html <el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed=...

收起
vue + elementui 实现前端读取 excel 表格内容
2022-05-19 10:01:14

按钮，然后选择excel文件，读取excel文件中的内容，并将内容展示到<el-table>表格中效果图如上：首先html的代码为： <el-upload class="upload-demo" action="" :on-change=...

收起

elementui 导入excel
vue使用xlsx实现上传excel表格并读取到表格数据
千次阅读 2020-06-19 10:25:28

转载大佬的博客，原文请看： ...今天我们来详细讲解怎样使用xlsx实现前端上传...然后，我们再使用xlsx，封装一个读取excel表格数据的组件： <template> <span style="margin-right:10px"> <input clas

收起
vue读取excel内容转JSON
千次阅读 2019-08-31 12:15:32

Hello大家周末好，今天说一下读取excel转为JSON。第一步安装： cnpm i xlsx --save-dev //需要依赖插件：安装过后就可以在需要的组件中引入即可第二步引入： import XLSX from "xlsx"; //引入第三步使用： ...

收起
vue实现excel上传获取表格数据
2021-08-13 13:39:53

使用mixin.js将方法作为公用方法 import XLSX from 'xlsx' // mixins.js export const xlsxMixin = { methods: { impExcel(e) { //导入信息 const that = this let ...// res即获取的表格数据，在此做其他处理即可 })

收起
在vue中使用vue-json-excel，导出excel表格数据
千次阅读 2020-11-23 10:46:56

在vue中使用vue-json-excel，导出excel表格数据 表格安装插件 npm：npm install vue-json-excel -S yarn：yarn add vue-json-excel -S 在main.js中引入 import JsonExcel from 'vue-json-excel' Vue.component('...

收起
vue前端解析读取excel文件
千次阅读 2021-11-11 14:23:19

npm install xlsx --save 导出导入 {{ errorMsg }} 确认 // 页面引用导出导入 setExportData() { return { excelTitle: { code: "编号", name: "名称", }, excelData: [], excelName: "导出", }; }, ...

收起
vue + elementui 读取excel文件内容
2022-07-01 14:50:55

读取excel文件

收起

elementui
VUE 解析 EXCEL 并将数据导入到数据库
2022-08-12 11:00:15

代码】VUE 解析 EXCEL 并将数据导入到数据库。

收起
前端vue导入excel并读取内容
2022-09-09 15:14:16

前端操作Excel导入并读取内容填充到表格中，以及多个sheet如何操作

收起
vue excel文件的导入读取和下载
千次阅读 2020-12-22 11:54:59

导读：后台管理平台经常要上传文件读取文件的内容和导出数据表，因此需要依赖第三方插件xlsx1、安装依赖npm install xlsx -S2、在目标组件vue中引入import XLSX form 'xlsx3、简单的创建并导出数据表data() {return ...

收起
vue 结合element使用upload读取excel的数据并展现在表格中
2022-06-16 09:55:12

js读取excel的数据

收起
vue.js实现excel和图片的导入
2021-01-20 12:32:52

由于项目需要同时导入excel文档和jpg图片，因此尝试了一些方法来完成任务。图片数据是以base64格式存入的，显示和转移都比较...使用的是element-ui，使用的是vue解析excel方法，需要安装xslx，可参考https://blog.cs

收起
Vue读取Excel文件转换为Html预览，打印
千次阅读 2020-12-01 21:01:42

Vue读取网络路径Excel文件转换为Html预览，打印前言一、预览EXCEL文件1.获取网络路径Excel文件2.转换格式后的数据3.最终结果二、打印文件前言我们需要对一些Excel文件进行预览，那么可以调用第三方的接口转到别的...

收起

vue

vue读取 excel 表格内容

main.js

vue 读取excel内容

vue读取Excel并分组处理数据显示

安装xlsx

Excel数据格式（因处理的特殊性，不像PHPExcel后端读取Excel那样，以A_Z可以获取指定列数据，故此Excel默认增加一行数据，作为key）

vue数据处理并展示（vue+elementUi）