纯前端导出,导入excel并且修改excel样式

yarn add pikaz-excel-js
npm i -S pikaz-excel-js

/**html*/
<excel-export :bookType="bookType" :filename="filename" :sheet="sheet" :on-error="onError">
     <div class="export-btn">点击导出</div>
 </excel-export>
 /**手动导出*/
/** <excel-export :bookType="bookType" :filename="filename" :sheet="sheet" :on-error="onError" :manual="true"
      ref="excelExport">
    </excel-export>
    <div @click="exportTable">点击导出</div>**/
 /**js*/
import { ExcelExport } from 'pikaz-excel-js'
import { ExcelImport } from 'pikaz-excel-js'
  export default {
  components: { ExcelExport,ExcelImport },
  data() {
    return {
    /**导出的模拟数据*/
      bookType: 'xlsx',
      filename: 'export-demo',
      sheet: [
        {
          title: '插件信息',
          tHeader: ['作者', '语言', '插件名称', '插件用途'],
          table: [{ author: 'pikaz', language: 'javascript', name: 'pikaz-excel-js', application: 'excel的导入导出' }],
          keys: ['author', 'language', 'name', 'application'],
          sheetName: '插件信息',
          cellStyle: [
            {
              cell: 'A1',
              font: {
                sz: 14,
                color: { rgb: "ffffff" },
                bold: true,
              },
              fill: {
                fgColor: { rgb: "ff7e00" },
              }
            }
          ]
        },
        {
          title: '插件信息2',
          multiHeader: [['基础信息', '', '', '详细信息'], ['作者', '语言', '插件名称', '插件用途']],
          table: [{ author: 'pikaz', language: 'javascript', name: 'pikaz-excel-js', application: 'excel的导入导出' }],
          keys: ['author', 'language', 'name', 'application'],
          merges: ['A2:C2'],
          colWidth: [40, 16, 16, 20],
          sheetName: '插件信息2',
          globalStyle: {
            font: {
              color: { rgb: "ff7e00" },
            }
          },
          cellStyle: [
            {
              cell: 'A1',
              font: {
                name: '黑体',
                sz: 14,
                color: { rgb: "ffffff" },
                bold: true
              },
              fill: {
                fgColor: { rgb: "ff7e00" },
              }
            }
          ]
        }
      ]
    }/**导入后的解析数据*/
    json:''
  },
  methods: {
    /**
     * @name: 导出错误
     * @param {String} err/错误信息 
     * @return: 
     */
    onError(err) {
      console.log(err)
    }/**
     * @name: 导入成功
     * @param {Array} response/生导入数据 
     * @param {Object} file/导入文件 
     * @return: 
     */
    onSuccess(response, file) {
      this.json = JSON.stringify(response)
    },
     /**
     * @name: 手动导出
     * @param {type} 
     * @return: 
     */
    exportTable () {
      this.$refs.excelExport.pikaExportExcel()
    }
  },
  computed: {},
  watch: {},
}


  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端中,你可以使用以下方法来实现导入导出 Excel 文件: 1. 导出 Excel 文件: - 使用 Excel.js、xlsx-populate、xlsx-writer 等库来生成 Excel 文件。 - 将数据转换为 Excel 格式并下载到客户端。在浏览器中,你可以创建一个 Blob 对象,然后使用 URL.createObjectURL(blob) 方法来生成下载链接,最后使用 a 标签的 download 属性来触发下载。 2. 导入 Excel 文件: - 使用第三方库如 exceljs、xlsx、xlsx-populate 等来读取和解析 Excel 文件。 - 通过文件输入(input file)元素让用户选择要上传的 Excel 文件,并使用 FileReader 对象读取文件内容。 - 使用解析库将读取到的数据进行处理,如解析为 JSON 或者直接处理为 JavaScript 对象。 以下是一个使用 SheetJS/xlsx 库导入导出 Excel 文件的示例: ```html <!-- 导入 Excel 文件 --> <input type="file" id="file-input" accept=".xlsx,.xls" /> <!-- 导出 Excel 按钮 --> <button id="export-btn">导出 Excel</button> <script src="https://unpkg.com/xlsx/dist/xlsx.full.min.js"></script> <script> // 导入 Excel 文件 document.getElementById('file-input').addEventListener('change', function(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.onload = function(e) { var data = new Uint8Array(e.target.result); var workbook = XLSX.read(data, { type: 'array' }); // 处理 Excel 数据 var sheetName = workbook.SheetNames[0]; var worksheet = workbook.Sheets[sheetName]; var jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }); console.log(jsonData); }; reader.readAsArrayBuffer(file); }); // 导出 Excel 文件 document.getElementById('export-btn').addEventListener('click', function() { var worksheet = XLSX.utils.json_to_sheet([ { Name: 'John Doe', Age: 30 }, { Name: 'Jane Smith', Age: 25 } ]); var workbook = XLSX.utils.book_new(); XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1'); var excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); var blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); var url = URL.createObjectURL(blob); var a = document.createElement('a'); a.href = url; a.download = 'data.xlsx'; a.click(); URL.revokeObjectURL(url); }); </script> ``` 这是一个基本的示例,你可以根据需求进行修改和扩展。记得在实际使用中引入相应的库文件,并根据实际情况进行数据处理和样式设置。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值