vue3 用xlsx 解决 excel 低版本office无法打开问题

已于 2024-02-20 10:04:34 修改
阅读量835 收藏 6
点赞数 9
分类专栏： # vue实践 文章标签： excel xlsx vue3
于 2024-02-20 09:53:42 首次发布
那一抹阳光--铁子--有没坑位推荐一哈
本文链接：https://blog.csdn.net/hr_beginner/article/details/136183053
版权

需求背景

原使用 vue3-json-excel ，导致在笔记本office环境下，出现兼容性问题

 <vue3-json-excel class="export-btn" :fetch="excelGetList" :fields="jsonFields" header="告警配置列表" name="告警配置列表.xls" type="xls">
   <span>批量导出</span>
 </vue3-json-excel>

生成的.xls文件，提示文件格式和扩展名不匹配，文件可能已损坏或不安全在这里插入图片描述
生成的.xlsx文件，提示文件格式或文件扩展名无效
在这里插入图片描述

解决思路

既然 vue3-json-excel 达不到效果，就改用xlsx

解决效果

在这里插入图片描述

将json导出为excel

/**
 * 将json数据导出为excel
 * @param {object} options
 * @param {[]} data 数据源 // {'供热系统': "大唐热电供热系统", '供热面积(万m²)': 34.099, '分布式水泵数量': 0, '当前供热系统': "大唐热电供热系统"}
 * @param {string} fileName 文件名称
 * @param [] keySort  字段排序 // ['供热系统', '供热面积(万m²)', '分布式水泵数量','当前供热系统']
 * @param {string} sheetName sheet名称
 * @param {boolean} titleNum 表头数
 */
import XLSXStyle from "xlsx-style-vite" //"^0.0.2"
import FileSaver from "file-saver";// "^2.0.5"
import * as XLSX from "xlsx";//"^0.17.0",

export const exportToExcel = (data, fileName, keySort, sheetName = "sheet1", titleNum = 1) => {
  // const sheet = XLSX.utils.json_to_sheet(data)
  const temp = data.map(item => {
    const arr = []
    keySort.forEach(k => arr.push(item[k]))
    return arr
  })
  temp.unshift(keySort)
  const sheet = XLSX.utils.aoa_to_sheet(temp)
  const wb = {
    SheetNames: [sheetName],
    Sheets: {
      [sheetName]: sheet
    }
  }
  const range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);
  //单元格边框样式
  const borderStyle = {
    top: {
      style: "thin",
      color: {rgb: "000000"}
    },
    bottom: {
      style: "thin",
      color: {rgb: "000000"}
    },
    left: {
      style: "thin",
      color: {rgb: "000000"}
    },
    right: {
      style: "thin",
      color: {rgb: "000000"}
    }
  };
  const cWidth = [];
  for (let C = range.s.c; C < range.e.c + 1; ++C) {   //SHEET列
    let len = 100; //默认列宽
    const len_max = 400; //最大列宽
    for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
      const cell = {c: C, r: R};                    //二维 列行确定一个单元格
      const cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2
      if (wb.Sheets[sheetName][cell_ref]) {
        if (R < titleNum) {
          wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 style
            font: {
              sz: 14, // 标题字号
              color: {rgb: '060B0E'},// 颜色
              bold: true//加粗
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
            },
            fill: {
              fgColor: {rgb: 'E4E4E4'}, // 背景
            },
            border: borderStyle,//用上面定义好的边框样式
          };
        } else {
          wb.Sheets[sheetName][cell_ref].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
            },
            border: borderStyle,//用上面定义好的边框样式
          };
        }
        //动态自适应：计算列宽
        const va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v || ''));
        const card1 = JSON.parse(JSON.stringify(va.toString())).match(/[\u4e00-\u9fa5]/g); //匹配中文
        let card11 = "";
        if (card1) card11 = card1.join("")
        const card2 = JSON.parse(JSON.stringify(va.toString())).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文
        let st = 0;
        if (card11) st += card11.length * 20  //中文字节码长度
        if (card2) st += card2.length * 10  //非中文字节码长度
        if (st > len) len = st;
      }
    }
    cWidth.push({'wpx': len > len_max ? len_max : len});     //列宽
  }
  wb.Sheets[sheetName]['!cols'] = cWidth;
  const wopts = {bookType: 'xlsx', bookSST: false, type: 'binary'};
  const wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！
  FileSaver(new Blob([s2ab(wbout)], {type: ""}), fileName + '.xlsx');

  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;
  }
}

将table导为excel

/**
 * 将table导出为excel
 * @param {object} options
 * @param {[]} table 表格元素
 * @param {string} fileName 文件名称
 * @param {string} sheetName sheet名称
 * @param {boolean} titleNum 表头数
 */
export const exportTableToExcel = (dom, fileName, sheetName = "sheet1", titleNum = 1) => {
  const wb = XLSX.utils.table_to_book(dom, {sheet: sheetName, raw: true});
  const range = XLSX.utils.decode_range(wb.Sheets[sheetName]['!ref']);
  //单元格边框样式
  const borderStyle = {
    top: {
      style: "thin",
      color: {rgb: "000000"}
    },
    bottom: {
      style: "thin",
      color: {rgb: "000000"}
    },
    left: {
      style: "thin",
      color: {rgb: "000000"}
    },
    right: {
      style: "thin",
      color: {rgb: "000000"}
    }
  };
  const cWidth = [];
  for (let C = range.s.c; C < range.e.c + 1; ++C) {   //SHEET列
    let len = 100; //默认列宽
    const len_max = 400; //最大列宽
    for (let R = range.s.r; R <= range.e.r; ++R) {  //SHEET行
      const cell = {c: C, r: R};                    //二维 列行确定一个单元格
      const cell_ref = XLSX.utils.encode_cell(cell);  //单元格 A1、A2
      if (wb.Sheets[sheetName][cell_ref]) {
        // if (R == 0){
        if (R < titleNum) {
          wb.Sheets[sheetName][cell_ref].s = {  //设置第一行单元格的样式 style
            font: {
              sz: 14,
              color: {rgb: '060B0E'},
              bold: true
            },
            alignment: {
              horizontal: 'center',
              vertical: 'center',
            },
            fill: {
              fgColor: {rgb: 'E4E4E4'},
            },
            border: borderStyle,//用上面定义好的边框样式
          };
        } else {
          wb.Sheets[sheetName][cell_ref].s = {
            alignment: {
              horizontal: 'center',
              vertical: 'center',
            },
            border: borderStyle,//用上面定义好的边框样式
          };
        }
        //动态自适应：计算列宽
        const va = JSON.parse(JSON.stringify(wb.Sheets[sheetName][cell_ref].v || ''));
        const card1 = JSON.parse(JSON.stringify(va.toString())).match(/[\u4e00-\u9fa5]/g); //匹配中文
        let card11 = "";
        if (card1) {
          card11 = card1.join("")
        }
        const card2 = JSON.parse(JSON.stringify(va.toString())).replace(/([^\u0000-\u00FF])/g, "");  //剔除中文
        let st = 0;
        if (card11) {
          st += card11.length * 20  //中文字节码长度
        }
        if (card2) {
          st += card2.length * 10  //非中文字节码长度
        }
        if (st > len) {
          len = st;
        }
      }
    }
    if (len > len_max) {//最大宽度
      len = len_max;
    }
    cWidth.push({'wpx': len});     //列宽
  }
  wb.Sheets[sheetName]['!cols'] = cWidth.slice(1, -1);
  // 删除列-----重点-----0就是第一列。。
  // wb.Sheets[sheetName]['!cols'][0] = {hidden: true}
  deleteCol(wb.Sheets[sheetName], 0)
  deleteCol(wb.Sheets[sheetName], cWidth.length - 1)
  // 合并列
  // wb.Sheets[sheetName]["!merges"] = [
  //   {  //合并A1A2单元格
  //     s: {//s为开始
  //       c: 0,//开始列
  //       r: 0//开始取值范围
  //     },
  //     e: {//e结束
  //       c: 1,//结束列
  //       r: 0//结束范围
  //     }
  //   }
  // ]
  const wopts = {bookType: 'xlsx', bookSST: false, type: 'binary'};
  const wbout = XLSXStyle.write(wb, wopts); //一定要用XLSXStyle不要用XLSX，XLSX是没有格式的！
  FileSaver(new Blob([s2ab(wbout)], {type: ""}), fileName + '.xlsx');

  function encodeCell(r, c) {
    return XLSX.utils.encode_cell({r, c});
  }

  // 删除行
  function deleteRow(ws, index) {
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let row = index; row < range.e.r; row++) {
      for (let col = range.s.c; col <= range.e.c; col++) {
        ws[encodeCell(row, col)] = ws[encodeCell(row + 1, col)];
      }
    }
    range.e.r--;
    ws['!ref'] = XLSX.utils.encode_range(range.s, range.e);
  }

  // 删除列
  function deleteCol(ws, index) {
    const range = XLSX.utils.decode_range(ws['!ref']);
    for (let col = index; col < range.e.c; col++) {
      for (let row = range.s.r; row <= range.e.r; row++) {
        ws[encodeCell(row, col)] = ws[encodeCell(row, col + 1)];
      }
    }
    range.e.c--;
    ws['!ref'] = XLSX.utils.encode_range(range.s, range.e);
  }

  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;
  }
}

导出样式

应粉丝要求，附上导出样式

import {h} from "vue";
import {ElMessageBox} from "element-plus";

ElMessageBox({
  title: '导出Excel表格',
  draggable: true,
  showCancelButton: true,
  showConfirmButton: false,
  message: h('div', null, [ // 这里用到了h函数
    h(ElButton, { text: true, type: 'primary', innerHTML: '导出选中数据', onClick: assignExport }),
    h(ElButton, { text: true, type: 'success', innerHTML: '导出所有数据', onClick: allExport })
  ]),
  cancelButtonText: '取消',
})
// 导出
const assignExport = () =>{
  console.log(111)
}
const allExport = () =>{
  console.log(222)
}

在这里插入图片描述

柳晓黑胡椒
关注
  • 9
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
Vue：使用vue-json-excel导出数据到excel
2401_84097696的博客
04-20 370
一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。分享一些简单的前端面试题以及学习路线给大家，狂戳这里即可免费领取和一个坚持的心很重要**，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。
vue-json-excel导出excel打开提示文件格式与扩展名不一致，哪位大神可以解释一下？
dpy521的博客
07-04 4867
vue-json-excel导出excel打开提示文件格式与扩展名不一致，哪位大神可以解释一下？
vue3+element-plus+xlsx实现复杂表格导入导出功能
m0_55681803的博客
12-15 2682
vue3+element-plus+xlsx实现复杂表格导入导出功能
andt vue3 使用xlsx读取excel数据 遇到的坑
qq_20604185的博客
04-24 4994
避坑读取xlsx文件遇到的直接问题
Vue3：将表格数据下载为excel文件
Junehhhhh的博客
10-26 2808
Vue3：将表格数据下载为excel文件
Java后端与Vue前端导出Excel表格文件并解决乱码和文件打不开
江湖人称小程的博客
11-26 8851
Java 需要用到 poi 两个依赖包，Maven如下： <!-- https://mvnrepository.com/artifact/org.apache.poi/poi --> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>5.0.0</version> </depende
vue文件流导出excel表格打不开
Hhuangjialin的博客
02-25 2263
vue文件流导出excel表格打不开
vue导出excel并修改表头样式
10-29
在Vue.js应用中导出Excel并修改表头样式是一个常见的需求，这主要涉及到前端数据处理、Excel文件生成以及样式定制等方面的知识。以下是一份详细的技术指南，帮助你理解和实现这个功能。 1. **Vue.js基础知识**：Vue...
Vue实现文件预览，支持word excel pdf ppt image txt mp4等格式
10-14
- **Excel预览**：使用 `xlsx` 库解析Excel文件，可以将数据展示在表格中。 - **Word/PowerPoint预览**：利用 `officegen` 生成HTML版本的预览，或者使用第三方服务如Microsoft的在线预览API。 - **视频预览**：`...
支持wordexcelpdf等各类型office文件预览的vue组件集合支持vue2和3，也支持React等非Vue框架
最新发布
02-28
支持word(.docx)、excel(.xlsx)、pdf等各类型office文件预览的vue组件集合，提供一站式office文件预览方案，支持vue2和3，也支持React等非Vue框架。Web-based pdf, excel, word preview library.zip
excel Vue 导出功能
07-20
在IT行业中，Excel和Vue.js是两个非常重要的工具。Excel是Microsoft Office套件中的一个电子表格应用程序，广泛用于数据处理、分析和展示。Vue.js则是一个轻量级的前端JavaScript框架，它以其易用性、灵活性和强大的...
weboffice 在线编辑word wps excel
10-31
4. **格式兼容性**：保证与Microsoft Office和WPS Office的格式兼容，意味着在Weboffice中编辑的文档，即使在桌面应用中打开也不会出现格式错乱的问题。 5. **版本历史**：Weboffice记录文档的编辑历史，用户可以...
vue3 预览excel文件
weixin_46463643的博客
08-08 1798
文件预览 excel vue3
vue安装xlsx组件报错 “export default (imported as ‘XLSX‘) was not found in ‘xlsx‘
Dark丶照萤映雪
06-18 5116
vue安装组件xlsx
在Vue3中实现前端导出Excel功能
一起学习
12-27 3425
本文主要介绍在Vue3中实现前端导出Excel功能。
记一次vue将列表下载为excel的兼容写法
m0_46562551的博客
03-18 162
记一次vue将列表下载为excel的兼容写法 需求需要将后端返回的列表数据下载到本地，查询资料发现采用blob文件流下载 1、后端返回的是blob文件流，传统的模拟href点击在IE下不兼容，无法下载 故采用兼容写法如下 /* 批量文件下载 */ export function listFileDownload(params) { api({ url: '/mweb/mcif.TellerListDownLoad.do', method: 'post', headers: {
前端基于XLSX实现数据导出到Excel表格，以及提示“文件已经被损坏，无法打开”的解决方法
在这里，我分享我的技术心得、项目经验、实用的技术教程、深入的技术分析以及前端开发的最新动态，希望能帮助到更多的人。
02-27 5123
在这种方法中，前端发起一个请求到后端，后端生成Excel文件并返回给前端，前端再将文件下载到本地。注意，excel流文件一定要在请求的时候加上响应类型字段，也就是：responseType: 'blob’或者，responseType: ‘arraybuffer’ ，否则下载出来的excel文件就会损坏，就会打不开。具体操作：打开excel文件，点击页面上方的左侧“文件”，然后点击“更多”里面的“选项”；再点击“受保护的视图”，取消选择右侧面板里面的勾选，最后点击“确定”。去掉右侧的选项，点击确定。
xlsx，xlsx-style file-saver ,vue3+vite4+Excel导出解决方案
潜心
02-03 2058
这是我的三个依赖，用以上的三个库就可以完美输出样式excel，这里解释一下xlsx-style-hzx这是一个兼容vue3 的xlsx-style版本，开箱即用，香香。最近在迁移一个vue2项目到vue3，过程真的很曲折，我希望可以帮其他的vue3开发者节省一些时间。前端excel导出，并且希望有样式的话需要依赖三个插件。下面分享一下我的package-json 文件。
XLSX + VUE获取表格内容，实现下载模板、导入表格、导出表格功能
qq_42221321的博客
08-11 1343
vue xlsx读取excel文件
vue3导出excel表格合并表头
06-01
在Vue3中导出Excel表格并合并表头，可以使用js-xlsx库和FileSaver库。以下是一个简单的示例代码： ```vue <template> <button @click="exportExcel">导出Excel</button> </template> <script> import { saveAs } from 'file-saver'; import XLSX from 'xlsx'; export default { methods: { exportExcel() { const worksheet = XLSX.utils.json_to_sheet(this.data); const workbook = { Sheets: { data: worksheet }, SheetNames: ['data'] }; const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' }); const blob = new Blob([excelBuffer], { type: 'application/octet-stream' }); saveAs(blob, 'data.xlsx'); } } } </script> ``` 在上述示例中，`this.data`是导出的数据，`XLSX.utils.json_to_sheet`用于将JSON数据转换为工作表，`XLSX.write`用于将工作簿写入Excel文件。使用`Blob`将文件转换为二进制数据，并使用`saveAs`函数将文件保存到本地。如果要合并表头，可以在`worksheet`对象中使用`mergeCells`属性指定合并单元格的范围。例如： ```js worksheet['!merges'] = [ { s: { r: 0, c: 0 }, e: { r: 0, c: 2 } } ]; ``` 这将合并第一行的前三列单元格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

柳晓黑胡椒

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值