前端导出图片和pdf样式问题和模糊问题

最新推荐文章于 2024-07-11 16:32:39 发布

youliroam

最新推荐文章于 2024-07-11 16:32:39 发布

阅读量4.1k

点赞数 2

分类专栏：前端 html+css+js php 文章标签：前端 javascript php

本文链接：https://blog.csdn.net/u014650004/article/details/124144631

版权

本文讨论了前端在导出图片和PDF时遇到的样式问题和模糊问题。前端常用的导出工具如html2canvas和dom-to-image、jspdf等存在对CSS支持不足的问题。作者选择了dom-to-image和jspdf，但发现dom-to-image导出的图片在PDF中模糊。为解决此问题，作者通过修改dom-to-image源码，导出放大四倍的图片再转换为PDF，实现了导出清晰图片和PDF的效果。

摘要由CSDN通过智能技术生成

前端导出图片和pdf样式问题和模糊问题

目前前端比较流行的导出图片插件有
html2canvas 和 dom-to-image等
导出pdf的插件有
jspdf 和 pdfmake等

1）选择dom-to-image和jspdf理由

ps:html导出图片和pdf的方法---1.html先导出为图片，2.再把图片导出为pdf

    之前的项目使用的是html2canvas和后端的wkhtmltopdf工具，没有使用前端的jspdf，但是html2canvas对很多css不支持，比如对文字的拉伸，字间距等不支持，所以为了能把复杂的html导出图片，并使效果达到预期，果断选择了dom-to-image
    后端的wkhtmltopdf也是对css一些样式不支持，所以直接改成使用前端的jspdf，把后端生成pdf全部放到前端来生成。
    但是问题又来了，dom-to-image导出的图片是原尺寸的，这样的话再把图片转成pdf，在pdf文件中总是很模糊，如果用之前的html2canvas导出就没问题，因为html2canvas可以设置导出的图片尺寸。所以为了解决图片到pdf模糊问题，直接修改dom-to-image源码。

2）解决方法

首先导出一张放大4倍的图片（scale:4，这个属性是后面加上的），再把图片导出pdf，这样pdf就很清晰了，部分代码如下：

/***引入js***/
<script type="text/javascript" src="xxx/dom-to-image.js"></script>
<script src="xxx/jspdf.debug.js"></script>

/***省略。。。***/
if(type == 'png'){
   
  domtoimage.toJpeg(dom[0], 
  	{
    quality: 1 ,scale:2}).then(function (dataUrl) {
   
        var link = document.createElement(

最低0.47元/天解锁文章