前端导出elementui表格到excel；vue结合后端导出excel响应乱码；前端做预览文件

r囧r小猫 2022-09-01 13:50 256阅读 0赞

前端框架多，一种方式不足以满足开发需求，现提供两种框架的不同导出方式，依据步骤即可导出，亲测有效

一、vue框架导出

1、安装依赖

npm install --save xlsx file-saver

2、在文件内引入

import FileSaver from "file-saver";
    import XLSX from "xlsx";

3、使用

html部分 ：  
    <el-button @click="exportExcel">导出</el-button>
    <div id="out-table">
          <el-table :data="tableData" border style="width: 100%">
                xxxx
           </el-table>
    </div>
    
    js部分：
    
    exportExcel() {
      /* 导出时使用原始格式，解决身份证手机号导出时变为科学计数法 */
      let xlsxParam = { raw: true };
      /* 从表生成工作簿对象 */
      let wb = XLSX.utils.table_to_book(
        document.querySelector("#out-table"),
        xlsxParam
      );
      /* 获取二进制字符串作为输出 */
      let wbout = XLSX.write(wb, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
      });
      try {
        FileSaver.saveAs(
          new Blob([wbout], { type: "application/octet-stream" }),
          //设置导出文件名称
          "yyjl.xlsx"
        );
      } catch (e) {
        if (typeof console !== "undefined") console.log(e, wbout);
      }
      return wbout;
    },

二、jsp+jq+vue框架导出

1、引入所需文件(后面有下载地址)

2、html部分，由于此插件只能直接识别table上的id，如果使用的是elelment的表格，可以添加原生表格并加隐藏，页面正常使用element表格显示，导出的是隐藏的原生表格

<el-table :data="rightGridData">
        <el-table-column v-for="(col,c) in rightGridCol" :key="c" :prop="col.prop"                 
                            :label="col.label" align="center" >
        </el-table-column>
    </el-table>
    
    <table class="table table-bordered table-striped" id="texceldown" style="display:none;">
        <thead>
              <tr>
                <td v-for="(col,c) in rightGridCol" :key="c">{
       {col.label}}</td>
              </tr>
        </thead>
        <tbody>
            <tr v-for="(items,i) in rightGridData" :key="i">
              <td>
                <span>{
       {items.ranking}}</span>
              </td>
              <td>
                <span>{
       {items.bigArea}}</span>
              </td>
              <td>
                <span>{
       {items.region}}</span>
              </td>
              <td>
                <span>{
       {items.cxqj}}</span>
              </td>
              <td>
                <span>{
       {items.dbqj}}</span>
              </td>
              <td>
                <span>{
       {items.tsbl}}</span>
              </td>
            </tr>
        </tbody>
    </table>
    <el-button type="primary" onclick="exportExcel('texceldown','分析表.xlsx')">导 出</el-button>

3、js部分，如果是template，使用οnclick="exportExcel"

所需文件可移步此链接下载:

[https://download.csdn.net/download/qq\_36784628/20590459][https_download.csdn.net_download_qq_36784628_20590459]

三、vue结合后端导出，响应的是二进制乱码问题，解决导出：

const sdnExport = async () => { //触发导出
          const params = {
            areaIds: state.ruleForm.id,
          }
          let res = await projectExport(params)
    
          //res是二进制内容，直接用来解析
          const blob = new Blob([res], { type: 'application/ms-excel' })
          const elink = document.createElement('a')
          elink.download = 'test.xlsx' //自定义名称
          elink.style.display = 'none'
          elink.href = URL.createObjectURL(blob)
          document.body.appendChild(elink)
          elink.click()
          URL.revokeObjectURL(elink.href) // 释放URL 对象
          document.body.removeChild(elink)
    }
    
    //封装的axios需要添加多一个参数responseType: 'blob'
    export const projectExport = (params) => {
      return request({
        url: '/municipal/project/export',
        method: 'get',
        params,
        responseType: 'blob',
      })
    }
    
    //拦截器直接返回二进制乱码
    instance.interceptors.response.use(
      (response) => {
        const { config } = response
        if (response.status === 200) {
          // 是文件流的直接返回
          if (config['responseType'] === 'blob') {
            return response.data
          }
    })

四、前端做预览文件（支持zip、txt、jpg、pdf、docx等）

1、将文件fangcloud.js存放在public/js下

index.html文件内引入

2、在页面上触发调用

// 预览文件
        const previewFile = async (row) => {
          let { yunFileId } = row
          let { data } = await getPreviewLink({
            yunFileId,
          })
          console.log(data)
          window.Fangcloud.previewFile({
            requestAddr: data.requestAddr,
            accessToken: data.accessToken,
            fileId: data.fileId,
            accessToken: data.accessToken,
            width: 1500,
            height: 900,
            hideSidebar: false,
            hideClose: false,
            previewUserToken: data.previewUserToken,
          })
        }
    后端需要返回的数据
    accessToken: "5ea2dce1-fb15-4545-a16b-da462c6a8994"
    fileId: "501046598479"
    previewUserToken: "VW8vozP2G8"
    requestAddr: "https://yunpan.xxx

3、谷歌浏览器需要在属性配置一下iframe问题，方式会在弹窗自动提示

4、效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55-l5LqG6L-Y5rKh552h_size_61_color_FFFFFF_t_70_g_se_x_16][]

fangcloud.js下载链接：

[https://download.csdn.net/download/qq\_36784628/21495067][https_download.csdn.net_download_qq_36784628_21495067]

[https_download.csdn.net_download_qq_36784628_20590459]: https://download.csdn.net/download/qq_36784628/20590459
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBA55-l5LqG6L-Y5rKh552h_size_61_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/f2c165699bd0452582bb3dc1e0c07122.png
[https_download.csdn.net_download_qq_36784628_21495067]: https://download.csdn.net/download/qq_36784628/21495067