前端excel导出图片

这篇具有很好参考价值的文章主要介绍了前端excel导出图片。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

此封装可以自定义图片大小,在excel中换行

前端导出excel添加图片,vue,前端,excel,javascript

一、开发背景

有了上一次的excel导出文字,客户还是不满足,又要把所有图片放到excel里,一目了然。

还好,上一次的插件exceljs支持导出图片。

二、封装

1、放在全局

// exceljs
// github: https://github.com/exceljs/exceljs/tree/v3.10.0

const ExcelJS = require("exceljs");
import FileSaver from "file-saver";
const { i18n } = require("@/utils/i18n.js");
import BUSINESS_CONFIG from "@/business_config.js";
require("script-loader!xlsx/dist/xlsx.core.min");
import { searchFileByTrans } from "@/api/receipts/receiptsCommon.js";

const twoHeaderRows = 65534;
const oneHeaderRows = 65535;

export default {
  install(Vue) {
    Vue.prototype.$exportImage = async function (
      trans_no,
      trans_type,
      fileName,
      fileType
    ) {
      // 工作表下标
      var sheetIndex = 0;
      // 图片占左边距离
      var width = 0;
      // 创建工作簿
      var workbook = new ExcelJS.Workbook();

      // 设置工作簿属性
      workbook.creator = "Me";
      workbook.lastModifiedBy = "Her";
      workbook.created = new Date(1985, 8, 30);
      workbook.modified = new Date();
      workbook.lastPrinted = new Date(2016, 9, 27);

      // 将工作簿日期设置为 1904 年日期系统
      workbook.properties.date1904 = true;

      // 所有工作表
      var worksheetAll = [];

      // 添加工作表
      worksheetAll.push(workbook.addWorksheet(`Sheet${sheetIndex + 1}`));
      let imageList = await getImageAssets(trans_no, trans_type);
      console.log("获取图片资源", imageList);
      imageList = await downLoadAll(workbook, imageList);
      console.log("获取图片属性", imageList);
      addImageToExcel(worksheetAll, sheetIndex, imageList, width);
      exportExcelImage(workbook, fileName, fileType);
      this.$store.commit("saveLoadShow", false);
    };
  },
};

2、获取图片资源

这里一定要用同步代码async await等图片回来了,我们再去操作导出。

sort就是数组排序,要按后端返回的document_name字段排序,各位看官可以根据自己的业务需求自行处理。

// 获取图片资源
function getImageAssets(trans_no, trans_type) {
  return new Promise((resolve, reject) => {
    searchFileByTrans(trans_no, trans_type).then(async (res) => {
      if (res.success) {
        let imageList = res.data.sort((a, b) =>
          a.document_name.localeCompare(b.document_name)
        );
        resolve(imageList);
      } else {
        this.$message.error(res.message);
      }
    });
  });
}

3、并行下载所有图片

// 并行下载所有图片
async function downLoadAll(workbook, imageList) {
  await Promise.all(
    imageList.map(async (item, index) => {
      return downLoadImage(workbook, item);
    })
  );
  return imageList;
}

// 下载图片
async function downLoadImage(workbook, item) {
  let imageUrl = `${window.location.origin}/api/common/download?resource=${item.file_path}`;
  // 通过网络请求拿到图片buffer
  let imageId = await fetch(imageUrl)
    .then((res) => res.arrayBuffer())
    .then((buffer) => {
      const imageBuffer = Buffer.from(buffer);
      var imageId = workbook.addImage({
        buffer: imageBuffer,
        extension: item.file_path.split(".")[1],
      });
      return imageId;
    });

  let image = await scaleImg(imageUrl);
  // 把id和宽高记录在item
  item.imageId = imageId;
  item.width = image.width;
  item.height = image.targetHeightPx;
}

4、设置图片的大小

这里我设置的是5cm高,宽度自适应

// 拿到图片宽高、然后设置高度5cm
function scaleImg(imageUrl) {
  const img = new Image();
  img.src = imageUrl;
  return new Promise((resolve) => {
    img.onload = async () => {
      let targetHeightPx = (5 * 96) / 2.54;
      // 四舍五入取整
      targetHeightPx = Math.round(targetHeightPx);
      // 计算缩放比例
      const scale = targetHeightPx / img.height;
      const width = img.width * scale;
      console.log("宽:", width, "高", targetHeightPx, "比例", scale);
      resolve({ width, targetHeightPx });
    };
  });
}

5、把图片放进excel

根据插件描述,需要一个每个图片都要一个imageId,这里我们在下载图片的时候已顺便获取

// 把图片添加到excel
function addImageToExcel(worksheetAll, sheetIndex, imageList, width) {
  let rowIndex = 0;
  imageList.forEach((item) => {
    // 开始列
    item.startCol = width;
    // 一个单元格的宽度约为72,加多一列
    width = width + Math.ceil(item.width / 72) + 1;

    // 名称开始行,从A2开始,5cm高度占10行,所以名称放在12 24 行
    let nameRow = (rowIndex + 1) * 12;

    // 添加图片,图片放在2,14,26行,对应下标1,13,25
    worksheetAll[sheetIndex].addImage(item.imageId, {
      tl: { col: item.startCol, row: 12 * rowIndex + 1 },
      ext: { width: item.width, height: item.height },
    });

    // 换行
    if (width > 15) {
      width = 0;
      rowIndex += 1;
    }

    // 名称开始列
    let start = String.fromCharCode("A".charCodeAt() + item.startCol);
    // 添加图片名称 document_name
    var cell = worksheetAll[sheetIndex].getCell(`${start}${nameRow}`);
    cell.value = item.document_name.split(".")[0];
    cell.style.font = {
      name: "宋体",
      family: 4,
      size: 10,
    };
  });
}

6、下载excel

转成bold,用FileSaver插件下载,和之前的导出excel一样的操作文章来源地址https://www.toymoban.com/news/detail-861734.html

// 导出
async function exportExcelImage(workbook, fileName, fileType) {
  // 转成buffer
  const buffer = await workbook.xlsx.writeBuffer();

  // MIME 类型
  var type = "application/vnd.openxmlformats";
  if (fileType == ".xls") {
    type = "application/vnd.ms-excel";
  }

  //   file-saver在保存文件时,需要把Buffer/Blob转换为Blob URL
  const blob = new Blob([buffer], { type });

  var defaultTitle = fileName || i18n.t("列表");

  if (fileType == ".xls") {
    FileSaver.saveAs(blob, `${defaultTitle}.xls`);
  } else {
    FileSaver.saveAs(blob, `${defaultTitle}.xls`);
  }
}

到了这里,关于前端excel导出图片的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue前端实现excel的导入、导出、打印功能

    导入导出依赖: npm install xlsx@0.16.9 npm install xlsx-style@0.8.13 --save 安装xlsx-style,运行报错 This relative module was not found: ./cptable in ./node_modules/xlsx-style@0.8.13@xlsx-style/dist/cpexcel.js 解决报错 在node_modulesxlsx-styledistcpexcel.js 807行 的 var cpt = require(\\\'./cpt\\\' + \\\'able\\\'); 改为: var cpt = cptable; 打印

    2023年04月08日
    浏览(11)
  • 【vue导入导出Excel】vue简单实现导出和导入复杂表头excel表格功能【纯前端版本和配合后端版本】

    前言 这是一个常用的功能,就是导入和导出excel表格 但是时常会遇到一些复杂表头的表格导出和导入 比如我这个案例里面的三层表头的表格。 网上看了下发现了一个非常简单导出和导入方法 当然这个是纯前端的版本,会出现分页不好下载的情况。所以实际工作中,导出还是

    2024年02月11日
    浏览(17)
  • vue 实现前端处理 “数组数据“ 转excel格式文件,并导出excel表格

    一、安装插件 XLSX 二、页面引入        希望我的愚见能够帮助你哦~,若有不足之处,还望指出,你们有更好的解决方法,欢迎大家在评论区下方留言支持,大家一起相互学习参考呀~

    2024年01月18日
    浏览(17)
  • Vue3 exceljs库实现前端导入导出Excel

    最近在开发项目时需要批量导入和导出Excel数据,在实现这个需求时,我们既可以在前端完成数据解析和文件生成工作,也可以通过前端发起导入以及导出请求后,后端实现解析文件流解析文件内容以及生成文件并提供下载链接的功能。 相较于后端处理Excel数据而言,使用前

    2024年03月14日
    浏览(16)
  • vue+xlsx实现前端模版下载、导入和导出excel文件

    产品需求:后端不想写下载,导入和导出的接口,让我们前端自己实现。 这里我们就可以用xlsx插件来实现,我们不多说了,先放一下实现的图片,下面我们分别把模版下载、导入和导出的代码放上来,想用的话,直接复制粘贴即可! 模版下载图片 导出图片: 好了,下面我

    2024年02月13日
    浏览(13)
  • 前端下载文化部几种方法(excel,zip,html,markdown、图片等等)和导出 zip 压缩包

    使用 后端的设置 Content-Type: application/octet-stream(下载用的流) 使用导出 zip 如果这篇【文章】有帮助到你💖,希望可以给我点个赞👍,创作不易,如果有对前端或者对python感兴趣的朋友,请多多关注💖💖💖,咱们一起探讨和努力!!! 👨‍🔧 个人主页 : 前端初见

    2024年02月14日
    浏览(11)
  • vue3前端excel导出;组件表格,自定义表格导出;Vue3 + xlsx + xlsx-style

    当画面有自定义的表格或者样式过于复杂的表格时,导出功能可以由前端实现 1. 使用的插件 : sheet.js-xlsx 文档地址:https://docs.sheetjs.com/ 中文地址:https://geekdaxue.co/read/SheetJS-docs-zh/README.md xlsx-style:https://www.npmjs.com/package/xlsx-style 2. 安装引用 安装插件-vue3 引用插件 3. 组件表格

    2024年04月26日
    浏览(11)
  • 使用ExcelJS实现excel的前端导出功能(Vue3+TS)

    ExcelJS :读取,操作并写入电子表格数据和样式到 XLSX 和 JSON 文件。一个 Excel 电子表格文件逆向工程项目。 github中文文档:https://github.com/exceljs/exceljs/blob/master/README_zh.md  封装excel.ts工具文件 表格页面调用excel工具文件 

    2024年02月14日
    浏览(13)
  • 若依vue 多table前端HTML页面导出一张Excel表

    导入依赖,具体前端vue配置就不介绍了,直接晒具体细节代码 js代码 点个赞吧!

    2024年02月15日
    浏览(18)
  • 前端vue+elementui导出复杂(单元格合并,多级表头)表格el-table转为excel导出

    需求 :前端对el-table表格导出 插件 : npm install xlsx -S npm install file-saver --save 原理 :直接导出el-table的表格里面的数据,这样就会存在缺点,只会导出当前页面的数据,如果需要导出全部数据,可以自己重新渲染一个全部数据不可见的el-table表格,来导出就可以了 扩展 :经过

    2024年02月04日
    浏览(19)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包