精华内容
下载资源
问答
  • 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;
      };
    };
    

    导出

    v2

    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一样

    展开全文
  • 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内容

    说明:

    1. excel表必须要有工作表(sheet),且隐藏的工作表也会一起读取
    2. 结果会以对象形式导出
    3. 我用的组件是ant-vue
    4. 注意,你的上传组件方法,传参中一定要有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 读取本地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=...
  • 安装:yarn add file-saveryarn add xlsxyarn add script-loader --dev或者npm安装:npm install -S file-saver xlsx(这里其实安装了2个依赖)npm install-D script-loader在src下创建一个文件夹,包含两个文件: 然后...
  • 解析excel文件中数据
  • vue读取本机的excel文件的两种方式

    万次阅读 多人点赞 2018-12-03 15:38:36
    } readExcel1主函数 // 表格导入 readExcel1(files) { var that = this; console.log(files); // 此处判断不严谨,思路只是根据传入的参数校验数据的完整性,可根据自己需求修改 // 如果没有文件名 if(files.length...
  • vue Element Ui 通过 el-upload 来读取表格文件,借助 XLSX(安装: npm i XLSX -S) 来实现读取到的表格转为 JSON 数据格式,然后展示在 el-table 中。 <template> <div> <!-- 按钮 --> &...
  • @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获取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 ...
  • 因为需求需要读取excel的.xlsx和.xls文件来批量生成网页数据。找了网上的资料后发现js-xlsx可以实现。首先安装依赖:$ npm install xlsxHTML部分:引入:import XLSX from 'xlsx'设置数据:data() {return {outputs:...
  • 由于handsontable官方不支持excel导入,在尝试了sheetjs后,发现sheetjs会丢失单元格样式,于是转而使用exceljs完整了实现了Excel读取和渲染。 handsontable非常强大,能够完全自定义单元格渲染方式和内容,是开发...
  • 一、导入Excel 并读取excel数据 1、使用element的组件el-upload先完成上传excel的步骤(获取上传的file) html <el-upload class="upload-demo" action="" :on-change="handleChange" :on-exceed=...
  • 按钮,然后选择excel文件,读取excel文件中的内容,并将内容展示到<el-table>表格中   效果图如上: 首先html的代码为: <el-upload class="upload-demo" action="" :on-change=...
  • 转载大佬的博客,原文请看: ...今天我们来详细讲解怎样使用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"; //引入 第三步使用: ...
  • 使用mixin.js将方法作为公用方法 import XLSX from 'xlsx' // mixins.js export const xlsxMixin = { methods: { impExcel(e) { //导入信息 const that = this let ...// res即获取的表格数据,在此做其他处理即可 })
  • 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: "导出", }; }, ...
  • 读取excel文件
  • 代码】VUE 解析 EXCEL 并将数据导入到数据库。
  • 前端操作Excel导入并读取内容填充到表格中,以及多个sheet如何操作
  • vue excel文件的导入读取和下载

    千次阅读 2020-12-22 11:54:59
    导读:后台管理平台经常要上传文件读取文件的内容和导出数据表,因此需要依赖第三方插件xlsx1、安装依赖npm install xlsx -S2、在目标组件vue中引入import XLSX form 'xlsx3、简单的创建并导出数据表data() {return ...
  • js读取excel数据
  • 由于项目需要同时导入excel文档和jpg图片,因此尝试了一些方法来完成任务。 图片数据是以base64格式存入的,显示和转移都比较...使用的是element-ui,使用的是vue解析excel方法,需要安装xslx,可参考https://blog.cs
  • Vue读取网络路径Excel文件转换为Html预览,打印前言一、预览EXCEL文件1.获取网络路径Excel文件2.转换格式后的数据3.最终结果二、打印文件 前言 我们需要对一些Excel文件进行预览,那么可以调用第三方的接口转到别的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,525
精华内容 610
热门标签
关键字:

vue读取excel表格数据

友情链接: ORIGIN.rar