如何将png画布图像下载为PDF JQuery [英] How to download a png canvas image as PDF JQuery
本文介绍了如何将png画布图像下载为PDF JQuery的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我很多次写过这段代码,下载图像为png。现在我需要将图像下载为pdf,我不知道如何在不改变代码结构的情况下执行此实现。任何人都可以帮我这个忙吗?非常感谢。
I wrote this code many times ago, to download an image as png. Now I need that the image is downloaded as pdf and I don't know how to do this implementation without changing too much the structure of my code. Can anybody do me this favour? Thank you very much.
我的JQuery:
function genScreenshot() {
html2canvas(document.getElementById('boxes'), {
onrendered: function(canvas) {
$('#container').html("");
$('#container').append(canvas);
if (navigator.userAgent.indexOf("MSIE ") > 0 ||
navigator.userAgent.match(/Trident.*rv\:11\./))
{
var blob = canvas.msToBlob();
window.navigator.msSaveBlob(blob,'yuppy.png');
}
else {
$('#test').attr('href', canvas.toDataURL("image/png"));
$('#test').attr('download','yuppy.png');
$('#test')[0].click();
}
}
});
}
要实施的代码示例:
html2canvas($("#canvas"), {
onrendered: function(canvas) {
var imgData = canvas.toDataURL(
'image/png');
var doc = new jsPDF('p', 'mm');
doc.addImage(imgData, 'PNG', 10, 10);
doc.save('sample-file.pdf');
}
});
推荐答案
你可以改编 这个答案 代码,使用 jsPDF
:
JS
$('#test').click(genScreenshot);
function genScreenshot() {
html2canvas(document.getElementById('boxes'), {
onrendered: function(canvas) {
$('#container').html("");
$('#container').append(canvas);
var imgData = canvas.toDataURL("image/jpeg", 1.0);
var pdf = new jsPDF();
pdf.addImage(imgData, 'JPEG', 0, 0);
pdf.save('screenshot.pdf');
}
});
}
CSS
#boxes {
background: #fff; /* To avoid a black background in PDF */
}
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<div id="boxes">
<h1>This is some content for the screenshot</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae asperiores est autem corporis natus nesciunt veritatis, ullam inventore distinctio, quisquam nam quis temporibus vero, fugiat tempore officia. Laborum, harum, alias.</p>
</div>
<button id="test">Download as PDF</button>
<div id="container"></div>
注意:我只在Windows 10上的Chrome,Edge和Firefox。您可能想尝试其他浏览器/系统。
Note: I only tested this in Chrome, Edge and Firefox on Windows 10. You might want to try other browsers/systems.
这篇关于如何将png画布图像下载为PDF JQuery的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文