JS-页面数据下载为Excel并在Excel中插入图片+在图片中进行绘制

天外天-亮

已于 2023-09-07 12:07:06 修改

阅读量1.3k

点赞数 3

文章标签： javascript excel 开发语言

于 2023-09-01 11:33:45 首次发布

本文链接：https://blog.csdn.net/weixin_44384273/article/details/132618937

版权

这个用到的是 exceljs 库，首先是下载

npm install exceljs --save
import * as ExcelJS from “exceljs”;

两个方法

function exportExcel() {
  // 定义数据
  let data = [
    ['1', '2', '3', '4', '5', '6', '7' ],
    ['1-1', '1-2', '1-3', '1-4', '1-5', '1-6', '1-7'],
    ['2-1', '2-2', '2-3', '2-4', '2-5', '2-6', '2-7']
  ];
  // 创建Excel工作簿
  const workbook:any = new ExcelJS.Workbook();
  // 创建工作表
  const worksheet = workbook.addWorksheet("sheet1"); // sheet名
  // 设置列宽
  worksheet.columns = [
    { width: 20 },
    { width: 40 },
    { width: 20 },
    { width: 20 },
    { width: 20 },
    { width: 20 },
    { width: 30 }
  ];
  // 设置数据行
  for (let i = 0; i < data.length; i++) {
    const row = worksheet.addRow(data[i]);
    // 设置行高
    row.height = 30;
    // 设置样式
    row.alignment = { vertical: "middle", horizontal: "center" };
  }
  // 将图片转换为base64 图片地址 = './img/img.png' 类似这样
  const base64Image = await urlToBase64('这里是图片地址');
  // 插入图片
  const signImage = workbook.addImage({
    base64: base64Image,
    extension: "png",
  });
  // 这里是设置图片位置
  worksheet.addImage(signImage, `G${data.length}:G${data.length}`);
  // 将Excel文件写入文件或导出
  // 下面这个是官网提供的方案但是会报错，经过多方查找我发现用下面这个方法即可
  // workbook.xlsx.writeFile('MyExcel.xlsx');
  workbook.xlsx.writeBuffer()
    .then((buffer: any) => FileSaver.saveAs(new Blob([buffer]), `${Date.now()}.xlsx`))
    .catch((err: any) => console.log('Error writing excel export', err));
}

urlToBase64方法

function urlToBase64(url: any) {
  return new Promise((resolve, reject) => {
    let canvas:any = document.createElement('canvas');
    let ctx = canvas.getContext('2d');
    let img = new Image();
    // 设置这里是防止 toDataURL时 跨域报错
    img.setAttribute('crossOrigin', 'anonymous');
    // 防止缓存
    img.src = url + '&time=' + new Date().valueOf();
    img.onload = function() {
      canvas.height = img.height;
      canvas.width = img.width;
	 // 这里就是我们实现在图片上绘制图形的地方 
      ctx.moveTo(100, 100);
      ctx.lineTo(100, 200);
      ctx.lineTo(200, 200);
      ctx.strokeStyle = "#f00";
      ctx.lineWidth = 10;
      ctx.stroke();
      ctx.beginPath();

      ctx.drawImage(img, 0, 0);
      let dataURL = canvas.toDataURL('image/png');
      resolve(dataURL);
      canvas = null;
    }
  });
}

执行exportExcel() 函数后的效果,下面这个是生成的图片，可以看出已经在图片上实现了绘制
在这里插入图片描述

这个是下载的效果
在这里插入图片描述
如果我写到这里就结束了，我想大部分看了这篇文章的朋友都会骂我，这也是我搜了大量文章后的感想，大量的同志们写博文，都太随意了主打一个自己能看懂，这里其实有多个大坑

1、就是定义数据时的 data ,很多文章直接就在函数中 this.data 用这个变量，我简直了，鬼知道里面是什么格式，我还得看官网一通查，怕一上来就挨骂，我就直接写出来了
2、workbook.xlsx.writeFile这个官网方法会报错，不能使用

Uncaught (in promise) TypeError: u.createWriteStream is not a function

3、我想各位复制完代码后会发现 FileSaver.saveAs 是个啥玩意，这也是我在查第二个问题时遇到的最恶心的一点，这是个什么玩意，直接就用了也没说哪来的，自己写的还是引用的，于是又折腾了半天，哎，所以希望大家以后写博文还是善良一些，多想想别人怎么用，最好就是复制粘贴然后直接就能跑出结果，否则就别写
说了这么多我还是赶紧放出答案吧
FileSaver.saveAs 哪来的呢

npm install file-saver --save
import * as FileSaver from ‘file-saver’;

多方踩坑，这样下载excel，插入图片，在图片中绘制，就算完成了，实属不易，还望点赞，多谢！

最后附加一个 workbook.addImage 的多个方法，本文中使用的base64是因为需要添加绘制，其实还有两个可选择，大家可以根据实际情况，自行选取

// add image to workbook by filename
const imageId1 = workbook.addImage({
  filename: 'path/to/image.jpg',
  extension: 'jpeg',
});

// add image to workbook by buffer
const imageId2 = workbook.addImage({
  buffer: fs.readFileSync('path/to.image.png'),
  extension: 'png',
});