当前位置:   article > 正文

element 富文本编辑器导出_富文本导出到excel

富文本导出到excel

导出面板

  1. <script setup>
  2. // 导出excel
  3. import { convert_excel_data,export_excel } from "@/utils/exportExcel.js";
  4. //导出Excel表格的表头设置
  5. const jsonFields = {
  6. 'type': '序号',
  7. 'userName': '姓名',
  8. 'age': '年龄',
  9. 'phone': '手机号',
  10. 'createTime': '注册时间',
  11. }
  12. //json数据
  13. const tableData = [
  14. { "userName": "张三", "age": 18, "phone": 15612345612, "createTime": "2019-10-22" },
  15. { "userName": "李四", "age": 17, "phone": 15612345613, "createTime": "2019-10-23" },
  16. { "userName": "王五", "age": 19, "phone": 15612345615, "createTime": "2019-10-25" },
  17. { "userName": "赵六", "age": 18, "phone": 15612345618, "createTime": "2019-10-15" }
  18. ]
  19. // 导出excel
  20. function exportExcel(){
  21. //转换为中文表头
  22. const excelData = convert_excel_data(tableData, jsonFields);
  23. // 导出文件 '文件列表.xlsx'
  24. export_excel(excelData,"文件列表");
  25. }
  26. </script>
  27. <template>
  28. <div class="export-excel">
  29. <el-button @click="exportExcel">导出excel</el-button>
  30. </div>
  31. </template>
  32. <style lang="scss" scoped></style>

导出js

  1. import * as XLSX from "xlsx";
  2. //把json数据导出到excel文件中
  3. export function export_excel(excelData, fileName) {
  4. // 将数据写入表格中
  5. const data = XLSX.utils.json_to_sheet(excelData);
  6. // 创建工作簿
  7. const wb = XLSX.utils.book_new();
  8. // 将工作表放入工作簿中
  9. XLSX.utils.book_append_sheet(wb, data, "data");
  10. // 生成文件并下载
  11. XLSX.writeFile(wb, fileName + ".xlsx");
  12. }
  13. //把英文表头换为中文
  14. export function convert_excel_data(excelData, tHeader) {
  15. return excelData.map((item) => {
  16. const obj = {};
  17. for (const k in item) {
  18. if (tHeader[k]) {
  19. obj[tHeader[k]] = item[k];
  20. }
  21. }
  22. return obj;
  23. });
  24. }

导入

面板

  1. <script setup>
  2. import * as xlsx from "xlsx"
  3. // 导入文件
  4. import { readFile } from "@/utils/readFile.js";
  5. import { ref } from 'vue'
  6. const tableData = ref([])
  7. const onChange = async (file) => {
  8. // console.log('file',file);
  9. // 获取上传excel的文件数据
  10. let dataBinary = await readFile(file.raw);
  11. // 获取工作簿对象
  12. let workBook = xlsx.read(dataBinary, { type: "binary", cellDates: true });
  13. // 获取第一个工作表的数据
  14. let workSheet = workBook.Sheets[workBook.SheetNames[0]];
  15. // 把工作表数据转为json
  16. const data = xlsx.utils.sheet_to_json(workSheet);
  17. //把json传给tableData
  18. tableData.value = data;
  19. }
  20. </script>
  21. <template>
  22. <div class="import">
  23. <!--
  24. 注意:
  25. 1. action为空
  26. 2. 添加 :auto-upload="false" ,阻止自动上传
  27. 3. 事件监听 on-change
  28. -->
  29. <el-upload class="upload-demo" action='' :auto-upload="false" :on-change="onChange">
  30. <el-button type="primary">Click to upload</el-button>
  31. </el-upload>
  32. <!-- 表格 -->
  33. <el-table :data="tableData" style="width: 100%">
  34. <el-table-column prop="username" label="用户名" width="180">
  35. </el-table-column>
  36. <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
  37. <el-table-column prop="score" label="分数"> </el-table-column>
  38. </el-table>
  39. </div>
  40. </template>
  41. <style lang="scss" scoped></style>
  1. /* 读取文件 */
  2. export const readFile = (file) => {
  3. return new Promise(resolve => {
  4. // FileReader 对象允许Web应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
  5. let reader = new FileReader()
  6. // 该方法用于将File对象转化为二进制文件
  7. reader.readAsBinaryString(file)
  8. // 当把文件所有数据加载完毕后,把数据传给promise的下一步
  9. reader.onload = ev => {
  10. resolve(ev.target.result)
  11. }
  12. })
  13. }

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/码创造者/article/detail/889584
推荐阅读
相关标签
  

闽ICP备14008679号