前端导出图片和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('a');
link.download = 'chart.jpeg';
link.href = dataUrl;
link.click();
$('.hide_label_comment').hide();
});
}else if(type == 'pdf'){
domtoimage.toJpeg(dom[0],
{ quality: 1 ,scale:4}).then(function (dataUrl) {
var pdf = new jsPDF('', 'px', 'a4');
pdf.addImage(dataUrl, 'jpeg', 0, 0, width/1.75, height/1.75);
let rawdata = pdf.output('blob');
let alink = document.createElement('a');
alink.href = window.webkitURL.createObjectURL(rawdata);
alink.target = '_blank';
alink.download = 'chart.pdf';
alink.click();
$('.hide_label_comment').hide();
});
}
/*
dom-to-image代码
修改draw方法，添加了scale属性
*/
function draw(domNode, options) {
return toSvg(domNode, options)
.then(util.makeImage)
.then(util.delay(100))
.then(function (image) {
var canvas = newCanvas(domNode);
var cc = canvas.getContext('2d');
if(options.scale){
cc.scale(options.scale,options.scale);
}
cc.drawImage(image, 0, 0);
return canvas;
});
function newCanvas(domNode) {
var canvas = document.createElement('canvas');
var scale = 1;
if(options.scale){
scale = options.scale;
}
canvas.width = (options.width || util.width(domNode)) * scale;
canvas.height = (options.height || util.height(domNode)) * scale;
if (options.bgcolor) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = options.bgcolor;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
return canvas;
}
}
这样既能完美的导出html为图片，也能使导出的pdf清晰
