原生js导出excel，并保留样式

最新推荐文章于 2024-04-18 18:07:00 发布

arguments_zd

最新推荐文章于 2024-04-18 18:07:00 发布

阅读量2.6k

点赞数

分类专栏： javascript的一些思考文章标签： 1024程序员节 javascript html5

本文链接：https://blog.csdn.net/qq_43185384/article/details/127497546

版权

javascript的一些思考专栏收录该内容

7 篇文章 1 订阅

订阅专栏

前端表格导出excel一般我们使用xlsx等插件导出，但如果想保留表格的样式导出的话，还需要再使用其他的插件才行，如要保留宽度、字体颜色、背景颜色等样式。

这里可以直接使用简短的原生js方法即可导出带样式的excel文件。

直接上代码

/*原生表格导出  带样式 参数table是原生table的DOM元素  filename是文件名*/
export function tableToXlsx(table, filename) {
  const uri = 'data:application/vnd.ms-excel;base64,',
    template = `<html>
            <head><meta charset="UTF-8"></head>
            <body><table border="1">${table.innerHTML}</table></body>
        </html>`;

  const a = document.createElement('a');
  a.href = uri + window.btoa(unescape(encodeURIComponent(template)));
  a.download = filename;
  a.click();
  document.removeChild(a);
}

使用场景

template
//ref的printRef用来获取dom
//Reconciliation 是需要打印的带有样式的组件
//isExport判断是否展示
//reconciliationData是传入的数据


//ref的printRef用来获取dom
//Reconciliation 是需要打印的带有样式的组件
//isExport判断是否展示
//reconciliationData是传入的数据
<template>
      <div style="height: 65vh; overflow: auto" ref="printRef">
        <Reconciliation :export="isExport" :content-data="reconciliationData"/>
      </div>
      <a-button type="primary" @click="exportSubmit">导出</a-button>
</template>

js引入

引入方法，将需要导出的table放到方法的第一个参数,这就是你需要导出的带样式的table


//引入方法，将需要导出的table放到方法的第一个参数
<script lang="ts" setup>
  import { tableToXlsx } from '/@/components/Excel';
  const printRef = ref();
  const isExport = ref(false);
  const exportSubmit = function () {
  const time = moment().format('yyyyMMDDHHmmss');
  isExport.value = true;
  nextTick(() => {
      tableToXlsx({
        table: printRef.value.firstChild.querySelector('table'),
        filename: '导出内容' + time + '.xlsx',
      })
      nextTick(() => {
        isExport.value = false;
      })
    })
  }
    
</script>

然后点击导出就可以了，导出内容就是带有样式的了