SpringBoot将HTML文件转为图片并返回给前端，uniapp接收

这里有一个坑，uniapp 的 uni.request和vue的axios 不一样， axios中应该设置responseType:'blob',但是uni.request要设置的是 responseType:'arraybuffer' ，如果出错，图片就会显示不出来。

kakacc:

481人浏览 · 2025-01-11 15:41:57

kakacc: · 2025-01-11 15:41:57 发布

1.maven依赖

        <dependency>
            <groupId>com.github.xuwei-k</groupId>
            <artifactId>html2image</artifactId>
            <version>0.1.0</version>
        </dependency>

2.后端代码

        //创建HTML模板并转为图片
        HtmlImageGenerator imageGenerator = new HtmlImageGenerator();
        String htmlTemplate = "<html><body><h1>Hello, World!</h1></body></html>";
        imageGenerator.loadHtml(htmlTemplate);
       
        //生成图片流
        BufferedImage bufferedImage = imageGenerator.getBufferedImage();

        //将图片流返回给前端
        ServletOutputStream outputStream = response.getOutputStream();
        response.setContentType("image/png");
        ImageIO.write(bufferedImage,"png",outputStream);
        outputStream.flush();
        outputStream.close();

3.前端代码

这里有一个坑，uniapp 的 uni.request和vue的axios 不一样， axios中应该设置responseType:'blob',但是uni.request要设置的是 responseType:'arraybuffer' ，如果出错，图片就会显示不出来

	function downLoadOrder() {
		uni.request({
			url: 'http://localhost:9999/warrantyOrder/downLoadWarrantyOrderImage',
			responseType:'arraybuffer',   //这里尤其重要，和vue3的axios 的blob不一样
			success: (res) => {
				const imageUrl = window.URL.createObjectURL(new Blob([res.data],{type: 'image/png'}))
				console.log(imageUrl)
				// imageSrc.value=imageUrl;
				saveImage(
					imageUrl
				)
			}
		})

	}

	function saveImage(url) {
		let oA = document.createElement("a");
		oA.download = ''; // 设置下载的文件名，默认是'下载'
		oA.href = url;
		document.body.appendChild(oA);
		oA.click();
		oA.remove(); // 下载之后把创建的元素删除
	}

技术共进，成长同行——讯飞AI开发者社区

更多推荐

机器学习与人工智能

python# 创建基类# 定义一对多关系# 定义多对一关系# 定义多对多关系（通过关联表）# 关联表（用于多对多关系）SQLAlchemy ORM提供了强大而灵活的数据库操作方式，通过本文的介绍，您应该能够：安装和配置SQLAlchemy定义数据模型和关系执行基本的CRUD操作构建复杂查询管理数据库事务遵循最佳实践SQLAlchemy还有更多高级特性，如混合属性、事件监听、自定义查询等，值得进一

讯飞AI开发者社区

读人形机器人21全球经济格局

1.7.1. 随着机器人接管常规任务，社会对技能的需求转向与自动化互补的技能，包括编程、维护、人工智能开发以及需要创造力、情感智能和复杂人际互动的工作。4.7.1. 为机器人技术和AI制定明确的规章制度，能够确保安全、增进信任，并促进其应用，包括产品安全、数据保护、有道德和负责任地使用AI等方面的标准。初创公司和老牌公司都在投资开发医疗机器人，以提升医疗服务的可及性和质量。2.1.2. 随着对机器