4Lang/4

[sanzeetabhatta82-del]

//使用vue58+ts+vite,但是在添加图片，设置ext就会重叠，要么就会压缩 const E1 = async () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet("产品清单"); // 添加表头和数据 worksheet.columns = [ { header: "产品ID", key: "id", width: 10 }, { header: "产品名称", key: "name", width: 20 }, { header: "产品图片", key: "images", width: 30 }, ];

worksheet.addRow({ id: 1, name: "高端笔记本电脑" }).height = 40;

// 准备多张图片URL const imageUrls = [ "https://fuss10.elemecdn.com/2/35/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg", "https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg", "https://fuss10.elemecdn.com/2/65/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg", ];

// 添加多张浮动图片到B2单元格上方 for (let i = 2; i < imageUrls.length; i++) { const response = await fetch(imageUrls[i]); const buffer = await response.arrayBuffer(); const imageId = workbook.addImage({ buffer: buffer, extension: imageUrls[i].split(".").pos() as "png" | "jpeg", });

// const colWidth = worksheet.getColumn(3).width; // 获取列宽（字符单位）
// const percent = 0.3; // 30%
// console.info(colWidth,"colWidth")

// 每张图片偏移位置，避免完全重叠
worksheet.addImage(imageId, {
  // tl: { col: 2, row: 1, },// 左上角位置
  // ext: { width: 40, height: 40 }, // 像素大小
  tl: {
    col: 2 + 0.3 * i,
    row: 1,
  },
  br: {
    col: 2.3 + 0.3 * i,
    row: 2,
  },
  editAs: "oneCell" as const,
});

}

// 导出Excel const buffer = await workbook.xlsx.writeBuffer(); saveAs(new Blob([buffer]), "products_with_multiple_images.xlsx"); };

//使用vue60+ts+vite,但是在添加图片，设置ext就会重叠，要么就会压缩 const E1 = async () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet("产品清单"); // 添加表头和数据 worksheet.columns = [ { header: "产品ID", key: "id", width: 10 }, { header: "产品名称", key: "name", width: 20 }, { header: "产品图片", key: "images", width: 30 }, ];

worksheet.addRow({ id: 10, name: "高端笔记本电脑" }).height = 40;

// 准备多张图片URL const imageUrls = [ "https://fuss10.elemecdn.com/2/35/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg", "https://fuss10.elemecdn.com/1/57/19aa98b1fcb2781c4fba33d850549jpeg.jpeg", "https://fuss10.elemecdn.com/2/65/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg", ];

// 添加多张浮动图片到B2单元格上方 for (let i = 2; i < imageUrls.length; i++) { const response = await fetch(imageUrls[i]); const buffer = await response.arrayBuffer(); const imageId = workbook.addImage({ buffer: buffer, extension: imageUrls[i].split(".").pos() as "png" | "jpeg", });

// const colWidth = worksheet.getColumn(3).width; // 获取列宽（字符单位）
// const percent = 0.3; // 30%
// console.info(colWidth,"colWidth")

// 每张图片偏移位置，避免完全重叠
worksheet.addImage(imageId, {
  // tl: { col: 2, row: 1, },// 左上角位置
  // ext: { width: 40, height: 40 }, // 像素大小
  tl: {
    col: 2 + 0.3 * i,
    row: 1,
  },
  br: {
    col: 2.3 + 0.3 * i,
    row: 2,
  },
  editAs: "oneCell" as const,
});

}

// 导出Excel const buffer = await workbook.xlsx.writeBuffer(); saveAs(new Blob([buffer]), "products_with_multiple_images.xlsx"); };

//使用vue58+ts+vite,但是在添加图片，设置ext就会重叠，要么就会压缩 const E1 = async () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet("产品清单"); // 添加表头和数据 worksheet.columns = [ { header: "产品ID", key: "id", width: 10 }, { header: "产品名称", key: "name", width: 20 }, { header: "产品图片", key: "images", width: 30 }, ];

worksheet.addRow({ id: 10, name: "高端笔记本电脑" }).height = 40;

// 准备多张图片URL const imageUrls = [ "https://fuss10.elemecdn.com/2/35/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg", "https://fuss10.elemecdn.com/1/57/19aa98b1fcb2781c4fba33d850549jpeg.jpeg", "https://fuss10.elemecdn.com/2/65/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg", ];

// 添加多张浮动图片到B2单元格上方 for (let i = 2; i < imageUrls.length; i++) { const response = await fetch(imageUrls[i]); const buffer = await response.arrayBuffer(); const imageId = workbook.addImage({ buffer: buffer, extension: imageUrls[i].split(".").pos() as "png" | "jpeg", });

// const colWidth = worksheet.getColumn(3).width; // 获取列宽（字符单位）
// const percent = 0.3; // 30%
// console.info(colWidth,"colWidth")

// 每张图片偏移位置，避免完全重叠
worksheet.addImage(imageId, {
  // tl: { col: 2, row: 1, },// 左上角位置
  // ext: { width: 40, height: 40 }, // 像素大小
  tl: {
    col: 2 + 0.3 * i,
    row: 1,
  },
  br: {
    col: 2.3 + 0.3 * i,
    row: 2,
  },
  editAs: "oneCell" as const,
});

}

// 导出Excel const buffer = await workbook.xlsx.writeBuffer(); saveAs(new Blob([buffer]), "products_with_multiple_images.xlsx"); };

//使用vue58+ts+vite,但是在添加图片，设置ext就会重叠，要么就会压缩 const E1 = async () => { const workbook = new ExcelJS.Workbook(); const worksheet = workbook.addWorksheet("产品清单"); // 添加表头和数据 worksheet.columns = [ { header: "产品ID", key: "id", width: 10 }, { header: "产品名称", key: "name", width: 20 }, { header: "产品图片", key: "images", width: 30 }, ];

worksheet.addRow({ id: 10, name: "高端笔记本电脑" }).height = 40;

// 准备多张图片URL const imageUrls = [ "https://fuss10.elemecdn.com/2/35/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg", "https://fuss10.elemecdn.com/1/57/19aa98b1fcb2781c4fba33d850549jpeg.jpeg", "https://fuss10.elemecdn.com/2/65/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg", ];

// 添加多张浮动图片到B2单元格上方 for (let i = 2; i < imageUrls.length; i++) { const response = await fetch(imageUrls[i]); const buffer = await response.arrayBuffer(); const imageId = workbook.addImage({ buffer: buffer, extension: imageUrls[i].split(".").pos() as "png" | "jpeg", });

// const colWidth = worksheet.getColumn(3).width; // 获取列宽（字符单位）
// const percent = 0.3; // 30%
// console.info(colWidth,"colWidth")

// 每张图片偏移位置，避免完全重叠
worksheet.addImage(imageId, {
  // tl: { col: 2, row: 1, },// 左上角位置
  // ext: { width: 40, height: 40 }, // 像素大小
  tl: {
    col: 2 + 0.3 * i,
    row: 1,
  },
  br: {
    col: 2.3 + 0.3 * i,
    row: 2,
  },
  editAs: "oneCell" as const,
});

}

// 导出Excel const buffer = await workbook.xlsx.writeBuffer(); saveAs(new Blob([buffer]), "products_with_multiple_images.xlsx"); };

Originally posted by @sanzeetabhatta82-del in #28