导出带图片的execl

最新推荐文章于 2024-05-29 15:29:20 发布
最新推荐文章于 2024-05-29 15:29:20 发布
阅读量259 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51426266/article/details/119174480
版权
这篇博客介绍了如何在前端使用js-table2excel库将包含图片的表格数据导出为Excel文件。首先，通过npm安装库，然后在需要导出的页面导入并使用该库。导出时，需要定义表格的列结构，包括标题、键和类型（对于图片列，类型设为'image'并指定宽度和高度）。最后，调用table2excel方法，传入列定义、数据列表和文件名即可完成导出。示例代码展示了具体的实现过程。
摘要由CSDN通过智能技术生成

第一步安装：npm install js-table2excel
第二步引入：在需要导出表格的页面引入 import table2excel from 'js-table2excel'
第三步使用 ：

没有简化有点麻烦要多写几个表格装图片：

  exportExcel() {

      /** column数据的说明 */

      //1.title为column的标题

      //2.key为column对应的key

      //3.type默认是text，若为图片格式type为image , 并且可以设置图片的宽高

      

      const column = [

        {

          title: "部门名称",

          key: "department_name",

          type: "text",

        },

        {

          title: "封闭次数",

          key: "toll_gate_closed_frequency",

          type: "text",

        },

        {

          title: "最后一次封闭时间",

          key: "close_time",

          type: "text",

        },

        {

          title: "限行/封闭原因",

          key: "tollgate_class_id_name",

          type: "text",

        },

        {

          title: "封闭原因图片",

          key: "picture10",

          type: "image",

          width: 279,

          height: 107,

        }, {

          title: "封闭原因图片2",

          key: "picture11",

          type: "image",

          width: 279,

          height: 107,

        }, {

          title: "封闭原因图片3",

          key: "picture12",

          type: "image",

          width: 279,

          height: 107,

        }, {

          title: "封闭原因图片4",

          key: "picture13",

          type: "image",

          width: 279,

          height: 107,

        }, {

          title: "封闭原因图片5",

          key: "picture14",

          type: "image",

          width: 279,

          height: 107,

        }, {

          title: "封闭原因图片6",

          key: "picture15",

          type: "image",

          width: 279,

          height: 107,

        },

      ];

      //this.newsList是从后端接口中获取数组列表

      //第三个参数是表格名

      table2excel(column, this.list, "收费站封闭数据表.xls");

    },

    getList() {

      let tempData = this.listQuery;

     

      tempData.department_id = tempData.department_id || -1;

      if (tempData.timeArr) {

        if (tempData.timeArr[0]) {

          tempData.StartTime = this._dateFormat(

            tempData.timeArr[0],

            "yyyy/MM/dd HH:mm:ss"

          );

        } else {

          delete tempData.StartTime;

        }

        if (tempData.timeArr[1]) {

          tempData.endTime = this._dateFormat(

            tempData.timeArr[1],

            "yyyy/MM/dd HH:mm:ss"

          );

        } else {

          delete tempData.timeArr;

        }

      }

      this.listLoading = true;

      this.$ajax

        .post("/api/back/Platform.ashx?par=TollGateClosedReportForm", tempData)

        .then((data) => {

          console.log(data);

          this.total = data.data.total;

          const tempData = data.data;

          this.list = tempData.rows;

         

            this.list.forEach(i=>{

              var  imageArr=i.picture1.split(',')

           

              imageArr.forEach((j,ind)=>{

                i[`picture1${ind}`]=j

               

                i.picture1=j

              })

            })

          

          this.listLoading = false;

        });

    },

龙凯希
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
excel导出可带图片
09-18
可进行excel的导出 支持图片的导出，亲自使用的整合到了一起
Nodejs导出Excel带图片，Nodejs后台导出带图片Excel
11-03
Nodejs导出Excel带图片，Nodejs后台导出带图片Excel 本资源内有说明及使用安装等详细步骤，以及引入插件 由于nodejs导出Excel带图片的资源比较少，我也是找了许久才知道怎么写的，这里发布个收费的，望各位见谅！
前端实现导出excel带图片功能(复制即可用版)
h周杰偷的博客
06-18 5367
前端实现导出功能带有图片
tp5 数据库信息导出到excel(带图片)
weixin_30518397的博客
07-21 736
function excel_down(){ //导入谁就去查谁 $data=Db::name('order_xueyou')->select(); // 导出Exl // import("./PHPExcel"); // import("./PHPExc...
前端导出excel和图片
weixin_43732512的博客
07-02 2232
介绍Blob 一直以来，JS都没有比较好的可以直接处理二进制的方法。而Blob的存在，允许我们可以通过JS直接操作二进制数据。 一个Blob对象就是一个包含有只读原始数据的类文件对象。Blob对象中的数据并不一定得是JavaScript中的原生形式。File接口基于Blob，继承了Blob的功能,并且扩展支持了用户计算机上的本地文件。 示例 this.$api.downloadFile(url, ...
easyExcel - 带图片导出
xhmico的博客
04-25 5019
Java-easyExcel入门教程：https://blog.csdn.net/xhmico/article/details/134714025之前有介绍过如何使用 ，以及写了两个入门的 ，这两个 能应付在开发中大多数的导入和导出需求，不过有时候面对一些复杂的表格，就会有点不够用，该篇讲述的是如何实现带图片导出在实际的开发过程中可能会遇到需要带图片导出的表格，比如以下案例：如果有多张图片要放在一个单元格中，并且单元格随着图片数量自动扩宽关于如何实现带图片导出的功能，在官方文档中有一个简单的说明：官方
Java导出excel带图片（希望能帮助你们节省时间）
最新发布
weixin_44050355的博客
05-29 914
【代码】Java导出excel带图片（希望能帮助你们节省时间）
导出带图片Excel服务
06-18
在IT行业中，导出带图片的Excel服务是一项常见的需求，特别是在数据分析、报告生成或数据可视化的情景下。本文将详细讲解如何使用Visual Studio 2013开发这样的服务。 首先，我们需要了解Excel导出的基本原理。在...
java导出图片到excel
10-13
对于导入和导出图片，我们需要使用它的SXSSFWorkbook（适用于大文件，内存效率高）或HSSFWorkbook（适用于小文件，内存消耗大）类。 2. **创建工作簿和工作表**：首先，你需要创建一个Workbook对象，这将是Excel...
PHP 导出Excel (注:导出带图片的EXCEL也支持)
10-21
本教程将专注于使用PHP生成带有图片的Excel文件，并解决文件保存后可能出现的乱码问题。我们将探讨如何利用PHP的第三方库来实现这一功能，以及处理过程中需要注意的关键点。 首先，PHP自身并不直接支持创建Excel...
导出带有图片xlsx的js插件
12-20
可直接导出带有图片得xlsx文件
js 实现 用JavaScript导出图像到Excel
03-30
js 实现 用JavaScript导出图像到Excel! 值得下载看看!资源免费,大家分享!!
table转Excel，可导出图片，亲测有效
12-17
javascript代码可以将HTML的table表格转换成excel表格。var table = document.getElementById("table")[removed]; export2Excel(table, '导出.xls');
zencart订单导出工具--导出带图片excel表格
09-19
"zencart订单导出工具--导出带图片excel表格" 是一个专门针对ZenCart系统的实用插件，旨在帮助商家更高效地处理订单数据。这款工具允许用户将订单信息导出为包含产品图片的Excel表格，这对于批量分析、库存管理和...
vue将数据导出Excel表格；含文字、图片类型（并有类型的转换）
专注前端技术，包括Web端、移动端、小程序、APP
10-06 4361
随着项目进度的前进，到了最后一步需要将数据导出到Excel表格内，并且数据中包含一些类型的转换，和图片类型。 正常情况下我们只需要导出文字类型，这是最简单的一种导出方式。那么现在我还有一些类型的转换和图片的导出到表格里，这该如何做？别慌，现在开源的插件有很多能够处理这种情况的，接下来我一步一步的展示，能够让你明白。 第一步：安装插件。 npm install js-table2excel 第二步：引入插件。 import table2excel from 'js-table2excel' 第三步，处理数
基于easyexcel实现导出excel，包括导出图片以及导出下拉框
小万是个程序员
01-19 2014
基于easyexcel实现导出excel，包括导出图片以及导出下拉框
vue-element-admin后台导出带图片的excel
m0_47005349的博客
12-17 471
1.引入js-table2excel插件 import table2excel from 'js-table2excel' 2.导出的表头数据 data() { excelHeaderArr: [ { title: '第一个字段', key: 'column_1', type: 'text' }, { title: '第二个字段', key: 'column
前端导出包含图片的el-table列表为excel文件
m0_65029152的博客
01-21 1051
本文记录前端实现excel的导出下载功能，主要是带有图片的数据导出为excel文件；
导出Excel包含图片
忆江南的博客
02-24 422
1.导出Excel包含图片的核心代码 //画图的顶级管理器，一个sheet只能获取一个（注意） HSSFPatriarch patriarch = sheet.createDrawingPatriarch(); row.setHeightInPoints(50); sheet.setColumnWidth(cellColumn, 5000); anchor = new HSSFClientAnchor(0, 0, 1023, 255, (short) cellColumn, i, (short) cel
springboot 导出带图片excel
12-17
Spring Boot 提供了多种方式来导出带有图片的 Excel 文件。 一种常用的方法是使用 Apache POI 库来处理 Excel 文件。首先，您需要添加 Apache POI 的依赖项到项目的 pom.xml 文件中： ```xml <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi</artifactId> <version>VERSION</version> </dependency> <dependency> <groupId>org.apache.poi</groupId> <artifactId>poi-ooxml</artifactId> <version>VERSION</version> </dependency> ``` 然后，创建一个 Excel 导出的服务类，例如 `ExcelExportService`。在该类中，您可以使用 Apache POI 的 API 创建一个新的工作簿，并将数据和图片添加到工作簿中。例如： ```java public class ExcelExportService { public static void exportWithImage(List<YourDataObject> dataList, String imagePath, String outputFilePath) throws IOException { Workbook workbook = new XSSFWorkbook(); Sheet sheet = workbook.createSheet("Sheet1"); // 添加数据到工作簿中 for (int i = 0; i < dataList.size(); i++) { Row row = sheet.createRow(i); YourDataObject data = dataList.get(i); // 在每一行中添加数据，可以通过 data 对象的方法获取数据 // 例如，row.createCell(0).setCellValue(data.getField1()); } // 添加图片到工作簿中 InputStream imageInputStream = new FileInputStream(imagePath); byte[] imageBytes = IOUtils.toByteArray(imageInputStream); int pictureIndex = workbook.addPicture(imageBytes, Workbook.PICTURE_TYPE_PNG); CreationHelper creationHelper = workbook.getCreationHelper(); Drawing<?> drawing = sheet.createDrawingPatriarch(); ClientAnchor anchor = creationHelper.createClientAnchor(); anchor.setCol1(1); // 图片在第二列 anchor.setRow1(1); // 图片在第二行 Picture picture = drawing.createPicture(anchor, pictureIndex); FileOutputStream fileOutputStream = new FileOutputStream(outputFilePath); workbook.write(fileOutputStream); fileOutputStream.close(); workbook.close(); } } ``` 然后，您可以在您的控制器方法中调用这个导出服务类的方法来导出 Excel 文件。例如： ```java @RestController public class ExcelController { @GetMapping("/export") public void exportExcelWithImage(HttpServletResponse response) throws IOException { List<YourDataObject> dataList = getData(); // 获取要导出的数据 String imagePath = "path/to/image.png"; // 图片的路径 String outputFilePath = "path/to/output.xlsx"; // 输出的文件路径 ExcelExportService.exportWithImage(dataList, imagePath, outputFilePath); File outputFile = new File(outputFilePath); String fileName = "output.xlsx"; response.setContentType("application/vnd.ms-excel"); response.setHeader("Content-Disposition", "attachment; filename=" + fileName); ServletOutputStream outputStream = response.getOutputStream(); FileInputStream fileInputStream = new FileInputStream(outputFile); IOUtils.copy(fileInputStream, outputStream); outputStream.flush(); outputStream.close(); fileInputStream.close(); outputFile.delete(); // 删除临时文件 } } ``` 在上述代码中，首先调用 `ExcelExportService.exportWithImage()` 方法来导出 Excel 文件。然后，使用 Spring Boot 的 `ServletResponse` 将 Excel 文件写入 HTTP 响应流中，最后通过设置响应的内容类型和文件名，使浏览器下载该文件。 通过上述方法，您可以使用 Spring Boot 导出带有图片的 Excel 文件。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值