Excel文件导入，导出

最新推荐文章于 2023-12-25 11:25:22 发布

阿良良木扣悠米

最新推荐文章于 2023-12-25 11:25:22 发布

阅读量1.1k

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/qq_48230583/article/details/122938474

版权

本文详细介绍了前端如何实现Excel文件的导入与导出，包括文件解析、使用快捷键操作文本样式，并展示了如何使用exportExcel.js生成Excel表格和创建自定义列表。此外，还涵盖了表格布局、SmartyPants、KaTeX数学公式、甘特图和UML图表的使用技巧。

摘要由CSDN通过智能技术生成

前端Excel文件导入，导出

Excel文件导入，导出

Excel文件导入，导出

功能快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G

文件导入文件解析

     <a-upload
       action=""
       :accept="acceptTypeStr"
       :showUploadList="false"
       :beforeUpload="beforeUpload"
       class="dt-upload operate-item"
     >
       <a-button v-if="isAllowImport" class="dt-btn-import">
         导入
       </a-button>
     </a-upload>
    /**
     * 文件上传前完成解析操作，不需要进行真实上传行为
     */
    beforeUpload(file) {
      let type = file.name.split('.').pop();
      if (this.acceptType.includes(type)) {
        this.resolveFile(file);
      } else {
        this.$message.info(`导入文件只能为${this.acceptType.join(',')}类型`);
      }
      return false;
    },

    /**
     * 解析上传文件
     */
    resolveFile(file) {
      const vm = this;
      const reader = new FileReader();

      reader.onload = e => {
        // 解析数据
        const bstr = e.target.result;
        const workBook = XLSX.read(bstr, { type: 'binary' });
        // 获取第一张 sheet
        const workSheetName = workBook.SheetNames[0];
        const workSheet = workBook.Sheets[workSheetName];
        // 转换数据
        const data = XLSX.utils.sheet_to_json(workSheet, { header: 1 });
        for (let i = 1; i < data.length; i++) {
          if (_.isEmpty(data[i])) {
            continue;
          }
          const obj = {};
          // 姓名
          obj.name = data[i][0];
          // 军别
          obj.armyCategory = data[i][1];
          // 军衔
          obj.militaryRank = data[i][2];
          // 年龄
          obj.age = data[i][3];
          // 军龄
          obj.militaryAge = data[i][4];
          // 军兵种
          obj.soldierCategory = data[i][5];
          // 级别
          obj.armyLevel = data[i][6];
          // 用户名
          obj.userName = data[i][7];

          // 关联登录用户 Id
          // let userData = vm.findUserByUsername(obj.userName);
          // obj.relatedUserId = userData;
          vm.staffList.push(obj);
        }

        this.importVisible = true;
      };
      reader.readAsBinaryString(file);
    },

如何改变文本的样式

强调文本 强调文本

加粗文本 加粗文本

标记文本

~~删除文本~~

引用文本

exportExcel.js

导出excel 方法


// 将一个sheet转成最终的excel文件的blob对象，然后利用URL.createObjectURL下载
const sheet2blob = sheet => {
  let sheetName = 'sheet1';
  const workbook = {
    SheetNames: [sheetName],
    Sheets: {},
  };
  workbook.Sheets[sheetName] = sheet; // 生成excel的配置项

  const wopts = {
    bookType: 'xlsx', // 要生成的文件类型
    bookSST: false, // 是否生成Shared String Table，官方解释是，如果开启生成速度会下降，但在低版本IOS设备上有更好的兼容性
    type: 'binary',
  };
  const wbout = XLSX.write(workbook, wopts);
  const blob = new Blob([s2ab(wbout)], {
    type: 'application/octet-stream',
  }); // 字符串转ArrayBuffer
  return blob;
};

const downloadAsExcel = (url, saveName) => {
  if (typeof url == 'object' && url instanceof Blob) {
    url = URL.createObjectURL(url); // 创建blob地址
  }
  const downloadElement = document.createElement('a');
  document.body.appendChild(downloadElement);
  downloadElement.href = url;
  downloadElement.download = saveName || ''; // HTML5新增的属性，指定保存文件名，可以不要后缀，注意，file:///模式下不会生效
  downloadElement.click(); // 点击下载
  document.body.removeChild(downloadElement); // 下载完成移除元素
  window.URL.revokeObjectURL(downloadElement.href); // 释放blob对象
};

function s2ab(s) {
  const buf = new ArrayBuffer(s.length);
  const view = new Uint8Array(buf);
  for (let i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

export { sheet2blob, downloadAsExcel };

// An highlighted block
var foo = 'bar';


 // 导出为excel表格
    async exportToExcel() {
      const header = [
        '姓名',
        '军别',
        '军衔',
        '年龄',
        '军龄',
        '军兵种',
        '级别',
        '创建时间',
      ];
      const staffData = await searchPageOfTrainingStaffByQueryParams(this);
      const newStaffData = staffData.map(staff => {
        return {
          [header[0]]: staff.name,
          [header[1]]: staff.armyCategory,
          [header[2]]: staff.militaryRank,
          [header[3]]: staff.age,
          [header[4]]: staff.militaryAge,
          [header[5]]: staff.soldierCategory,
          [header[6]]: staff.armyLevel,
          [header[7]]: staff.createTime,
        };
      });
      let sheet = XLSX.utils.json_to_sheet(newStaffData, { header }); //将一个table对象转换成一个sheet对象
      const filename = `训练人员表格${mongoid()}.xlsx`;
      downloadAsExcel(sheet2blob(sheet), filename);
    },

生成一个适合你的列表

项目
- 项目
  - 项目

项目1
项目2
项目3

计划任务
完成任务

创建一个表格

一个简单的表格是这么创建的：

项目	Value
电脑	$1600
手机	$12
导管	$1

设定内容居中、居左、居右

使用:---------:居中
使用:----------居左
使用----------:居右

第一列	第二列	第三列
第一列文本居中	第二列文本居右	第三列文本居左

SmartyPants

SmartyPants将ASCII标点字符转换为“智能”印刷标点HTML实体。例如：

TYPE	ASCII	HTML
Single backticks	`'Isn't this fun?'`	‘Isn’t this fun?’
Quotes	`"Isn't this fun?"`	“Isn’t this fun?”
Dashes	`-- is en-dash, --- is em-dash`	– is en-dash, — is em-dash