Excel.js导出图片和表格

说明

分析一个好用的插件，之前导出使用xml纯前端导出表格和图片会有一个bug，就是wps一切正常。excel软件打开会乱码而且图片会解析失败。
这里说的就是使用exceljs解决方案

解决

npm install file-saver --save
npm i exceljs （这里用的4.3.0版本）

简单封装了一个导出方法

import { saveAs } from './FileSaver.js'
import Excel from 'exceljs'
const exportToExcel = (data = { columns: [], rows: [], baseImg: '' }, name) => {if (!data.columns || !data.rows) returnconst columns = data.columnsconst rows = data.rowsconst baseImg = data.baseImgconst workbook = new Excel.Workbook()const worksheet = workbook.addWorksheet(name)worksheet.mergeCells('A1:R18')// console.log(img, 'img')// 通过 base64  将图像添加到工作簿const imageId1 = workbook.addImage({base64: baseImg,extension: 'jpeg'})//  在一定范围内添加图片// worksheet.addImage(imageId1, {//   tl: { col: 5, row: 0 },//   ext: { width: 1200, height: 600 }// })worksheet.addImage(imageId1, {tl: { col: 0, row: 0 },br: { col: 18, row: 18 }})worksheet.addTable({theme: null,name: 'MyTable',ref: 'A20',columns,rows})// 动态计算表头长度let width = adaptiveWidth(columns)if (width.length > 0) {for (let i = 0; i < width.length; i++) {worksheet.getColumn(width[i].ind).width = width[i].width}}// const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel'const fileType = 'application/octet-stream'workbook.xlsx.writeBuffer().then(data => {const blob = new Blob([data], { type: fileType })saveAs(blob, name + '.xlsx')})
}
const adaptiveWidth = (columns) => {let result = []for (let i = 0; i < columns.length; i++) {let str = columns[i].name.length// 四个字符为标准长度，累计长度倍数增加if (str > 4) {let number = Math.floor(str / 4)let width = 5 * number + 10result.push({ind: i + 1,width})}}return result
}export default exportToExcel

接收三个参数，图片导出需要可以接收base64 或者直接图片路径。还有就是表头的数组columns，表数据源的数组rows（数据源是个二维数组）
这里自己加了个动态判断导出表头的宽度计算。可以自适应列宽。
这里是中文文档，可以自行查阅使用https://github.com/exceljs/exceljs/blob/master/README_zh.md#%E9%A1%B5%E9%9D%A2%E8%AE%BE%E7%BD%AE

Excel.js导出图片和表格相关推荐

js导出EXCEL js导出EXCEL
参考一:http://wenku.baidu.com/view/7b81f3eb6294dd88d0d26b57.html 参考二: js导出EXCEL js导出EXCEL <html> ...
php单元格字体颜色,PHPExcel API接口用法大全，按模板导入excel，美化excel，导出图片，设置单元格字体颜色背景色边框，合并单元格，设置行高列宽...
PHPExcel API接口用法大全,按模板导入excel,美化excel,导出图片,设置单元格字体颜色背景色边框,合并单元格,设置行高列宽 2020-08-31 85 一:读取excel表模板$ph ...
Excel数据导出图片
表格数据导出图片 pom.xml引入Spire配置 <!-- Excel转换工具参考 https://www.e-iceblue.cn/licensing/install-spirepdf-f ...
php导出照片,Laravel使用 Laravel Excel文件导出图片功能
Laracel 中可以使用Laravel Excel进行Excel或者PDF的导出,使用composer进行安装此差价,Laravel-Excel将PHPExcel进行封装. 其官方文档:http:/ ...
java POI 读取Excel文件将图片、表格生成到PPT
临时有个需求,要求通过读取EXCEL文件,然后通过文件名称去给定的文件夹内查找图片,并将图片写入PPT中,详情以表格的形式写到图片右侧,每张图片一页PPT.效果如图所示: 用到的jar包如下(mave ...
cytoscape.js导出图片png或jpg
cytoscape.js实现导出图片png cytoscape.js 导出样例展示 cytoscape.js `Export `方法 [详情](https://js.cytoscape.org/#co ...
oracle导出一个表数据库,excel怎么导出多个表格数据库数据-一个excel表格中有多个sheet,如何将其导入oracle数......
一个excel表格中有多个sheet,如何将其导入oracle数... 解决方案如下: 可以新建一个查询,查询你所说的2个表中的所有数据运行查询,这样查询结果就包含了你要的数据,再把查询结果导出就 ...
程序解析excel中的图片_Excel表格中链接图片操作方法，以后查看图片点点鼠标就可以了...
在我们日常工作中,用Excel编辑表格有时需要插入图片,可以与前面的文字说明相对应,但是在插入图片很多时,会造成文件很大,运行相对也慢了.今天小编就和大家分享不用插入图片也能查看的方法,既不会造成文件 ...
python3 excel 图表导出图片_使用python代码将excel中的图表导出为图片
python导出Excel图表类前期准备就绪,网上已有类似的导出Excel图表类,但是在后面的使用中发现问题,即关键函数已在下面代码中标红: 调用代码: 执行成功,接下来到上面设置的导出路径查看导出 ...
php导出复杂表头excel,js导出复杂表头（多级表头）的excel
Document 姓名一月二月收入支出收入支出张三10元20元15元25元李四100元200元150元250元导出excel functiontableToExcel(){//要导出的数据 v ...

Excel.js导出图片和表格

说明

解决

Excel.js导出图片和表格相关推荐

最新文章

热门文章