Vue导出Excel文件

一、Vue导出Excel文件内容

Vue导出Excel文件有时会用于将表格数据导出到Excel文件中。因此，我们需要列出要导出的数据的细节，以便我们快速轻松地完成导出。

为了将数据导出到Excel文件中，我们将使用以下重要组件：

<template>
  <div>
    <vue-excel-export
      :data="tableData"
      :columns="tableColumns"
      :sheet-name="'data'"
      :file-name="'table-data'"
      :auto-width="true">
        <el-button>导出表格数据</el-button>
    </vue-excel-export>
  </div>
</template>

<script>
  import VueExcelExport from 'vue-excel-export';
  export default {
    components: { VueExcelExport },
    data() {
      return {
        tableColumns: [
          { title: '姓名', key: 'name' },
          { title: '年龄', key: 'age' },
          { title: '地址', key: 'address' }
        ],
        tableData: [
          { name: '小明', age: 20, address: '北京市海淀区' },
          { name: '小红', age: 18, address: '上海市黄浦区' },
          { name: '小刚', age: 25, address: '广州市天河区' }
        ]
      };
    }
  };
</script>

此示例说明了如何设置要显示的表格数据以及列标题。数据被绑定到vue-excel-export，文件名可以用于文件的名称，而sheet-name则可以用于设置工作表的名称。

二、Vue导出Excel文件报错403

在Vue中导出Excel，我们有时会遇到403错误代码。这可能是因为服务器框架禁止GET请求时导致的问题。解决此问题的方法是将useJquery选项设置为true。

<template>
  <div>
    <vue-excel-export :data="data"
                       :columns="columns"
                       :sheet-name="'data'"
                       :file-name="'file'"
                       :use-jquery="true">
      <el-button>导出</el-button>
    </vue-excel-export>
  </div>
</template>

三、Vue导出Excel文件加水印

有时我们需要在Excel文件中添加水印以保护我们的数据。我们可以使用FileSaver以及canvas-context-draw在Vue中添加水印。

<script>
  import html2canvas from 'html2canvas';
  import JSZip from 'jszip';
  import { saveAs } from 'file-saver';
  
  const exportTable = (tableElement, fileName = 'file', options = {}) => {
    const zip = new JSZip();
    const folder = zip.folder('files');
    const fileBaseName = fileName.replace('.xlsx', '');

    const sheetOptions = {
      sheetid: 'sheet1',
      headers: true,
    };
    const sheet = XLSX.utils.table_to_sheet(tableElement, sheetOptions);
    const range = XLSX.utils.decode_range(sheet['!ref']);
    for (let C = range.s.c; C <= range.e.c; ++C) {
      const address = XLSX.utils.encode_col(C) + '1';
      if (!sheet[address]) {
        continue;
      }
      sheet[address].v = sheet[address].v.toUpperCase();
    }
    range.s.r = 0;
    sheet['!ref'] = XLSX.utils.encode_range(range);

    const wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, sheet, 'data');
    const xlsx = XLSX.write(wb, { type: 'binary' });

    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const image = document.createElement('img');
    image.onload = () => {
      const tableHeight = tableElement.clientHeight || tableElement.offsetHeight || tableElement.scrollHeight;
      const tableWidth = tableElement.clientWidth || tableElement.offsetWidth || tableElement.scrollWidth;
      canvas.width = tableWidth;
      canvas.height = tableHeight;
      ctx.drawImage(image, 0, 0);
      ctx.font = '20px Calibri';
      ctx.fillStyle = options.color || 'rgba(200, 200, 200, 0.25)';
      ctx.rotate(-Math.PI / 4);
      ctx.fillText(options.text || 'CONFIDENTIAL', -tableWidth / 3, tableHeight / 2);
      const dataURL = canvas.toDataURL('image/png');
      const dataBlob = dataURLtoBlob(dataURL);
      folder.file(`${fileBaseName}.xlsx`, xlsx, { binary: true });
      folder.file(`${fileBaseName}.png`, dataBlob, { binary: true });
      zip.generateAsync({ type: 'blob' }).then(content => {
        saveAs(content, `${fileBaseName}.zip`);
      });
    };
    image.src = URL.createObjectURL(new Blob([xlsx], { type: 'application/octet-stream' }));
  };
  
  const dataURLtoBlob = dataURL => {
    const BASE64_MARKER = ';base64,';
    if (dataURL.indexOf(BASE64_MARKER) === -1) {
      const parts = dataURL.split(',');
      const contentType = parts[0].split(':')[1];
      const raw = parts[1];

      return new Blob([raw], { type: contentType });
    }

    const parts = dataURL.split(BASE64_MARKER);
    const contentType = parts[0].split(':')[1];
    const raw = window.atob(parts[1]);
    const rawLength = raw.length;
    const uInt8Array = new Uint8Array(rawLength);

    for (let i = 0; i < rawLength; ++i) {
      uInt8Array[i] = raw.charCodeAt(i);
    }

    return new Blob([uInt8Array], { type: contentType });
  };
  
  export default {
    data() {
      return {
        tableData: [
          { name: '小明', age: 20, address: '北京市海淀区' },
          { name: '小红', age: 18, address: '上海市黄浦区' },
          { name: '小刚', age: 25, address: '广州市天河区' }
        ],
        tableColumns: [
          { title: '姓名', key: 'name' },
          { title: '年龄', key: 'age' },
          { title: '地址', key: 'address' }
        ]
      };
    },
    methods: {
      exportTable() {
        const options = {
          text: '机密'
        };

        html2canvas(document.querySelector('#exportTable'), {
          backgroundColor: null,
          height: '400px',
          width: '800px'
        }).then(canvas => {
          this.$refs.table.style.display = 'none';
          document.body.appendChild(canvas);

          exportTable(canvas, 'table-data', options);
        });
      }
    }
  };
</script>

四、Vue导出Excel文件乱码

当我们的Excel文件中包含中文字符时，可能会遇到导出时出现乱码的问题。解决这个问题的方法是在导出的时候设置文件编码。

<template>
  <div>
    <vue-excel-export :data="tableData" :columns="tableColumns" :file-name="'table-data'"
                       :file-type="'xlsx;charset=UTF-8'">
      <el-button>导出Excel</el-button>
    </vue-excel-export>
  </div>
</template>

在此示例中，我们将打开UTF-8编码格式的文件。您可以将文件类型设置为其他文件类型，例如“xls”或“PDF”。

五、Vue导出Excel文件需要什么组件

导出Excel文件需要依赖以下组件：

• vue
• file-saver
• jszip
• table-to-sheet
• xlsx
• vue-excel-export

您可以使用以下命令安装这些组件：

npm i vue file-saver jszip table-to-sheet xlsx vue-excel-export

六、Vue导出Excel文件加标题

如果您需要在Excel中添加标题，可以在表格顶部添加标题行。此示例使用表格数据和表格列作为数据源。

<template>
  <div>
    <vue-excel-export :data="tableData" :columns="tableColumns" :sheet-name="'data'"
                 :file-name="'table-data'">
        <template slot="title">
          <tr>
            <th colspan="{{tableColumns.length}}">{{title}}</th>
          </tr>
        </template>
        <el-button>导出Excel文件</el-button>
    </vue-excel-export>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        title: '表格标题',
        tableData: [
           { name: '小明', age: 20, address: '北京市海淀区' },
           { name: '小红', age: 18, address: '上海市黄浦区' },
           { name: '小刚', age: 25, address: '广州市天河区' }
        ],
        tableColumns: [
          { title: '姓名', key: 'name' },
          { title: '年龄', key: 'age' },
          { title: '地址', key: 'address' }
        ]
      };
    }
  };
</script>

在此示例中，我们使用了vue-excel-export插槽来添加标题。插槽允许在导出文件时向表格中添加自定义HTML。我们在插槽中添加一个表格行，并使用colspan属性将所有列合并为一个单元格。

七、Vue导出Excel文件打不开

有时，当我们导出Excel文件时，文件无法打开。这可能涉及到Excel文件的版本和保存方法。

使用“binary”保存Excel文件以解决此问题。

const data = [
   { name: '小明', age: 20, address: '北京市海淀区' },
   { name: '小红', age: 18, address: '上海市黄浦区' },
   { name: '小刚', age: 25, address: '广州市天河区' }
];

const wb = XLSX.utils.book_new();
const ws_name = 'SheetJS';

/* Convert JOSN to Worksheet */
const ws = XLSX.utils.json_to_sheet(data);

/* Add row headers */
ws['!rows'] = [{ hpx: 24 }];

/* Add column headers */
ws['!cols'] = [{ wch: 20 }, { wch: 10 }, { wch: 40 }];

/* Add Worksheet to Workbook */
XLSX.utils.book_append_sheet(wb, ws, ws_name);

/* Save Workbook */
const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), 'test.xlsx');

/**
 * Convert string to ArrayBuffer
 *
 * @param s
 * @returns {ArrayBuffer}
 */
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;
}

在此示例中，我们使用XLSX.write方法将工作簿以二进制格式写入文件中。在将数据转换为二进制格式之前，我们使用s2ab函数将数据转换为ArrayBuffer。

八、Vue导出Excel文件表头加粗

您可以使用以下CSS样式来将Excel文件中的首行粗体显示。

th {
  text-align: left;
  font-weight: bold;
}

您还可以使用以下示例的命令来将表格标题加粗。

<style scoped>
  .excelTableRow th {
    font-weight: bold;
  }
</style>

<template>
  <div>
    <vue-excel-export
      :data="tableData"
      :columns="tableColumns"
      :sheet