1、概述
html2canvas官网链接
2、使用
- 转图片
html2canvas(document.querySelector('html'))
.then(canvas => {
var piid=processInsId;
var title = $("#title").val();
canvas.toBlob(blob => {
file = new File([blob], piid+"__"+title+"__"+".jpg", {
type: 'image/jpg'})
file.piid=piid;
file.processname=title;
var formData = new FormData();
let piidArr = [];
formData.append('file',file);
$.ajax({
url: "",
type: "post",
data: formData,
async: false,
contentType:false,
processData: false,
success: function (res) {
let url = ""
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
document.body.appendChild(link)
link.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(link)
document.querySelector('html').remove();
},
error: function (res) {
alert(res.message)
}
});
})
})
- 转pdf
var content = document.querySelector('html')
var formName= document.getElementById('formName');
formName= '表单'+'.pdf';
download(content)
function download(content) {
html2canvas(content, {
allowTaint: true,
scale: 3
}).then(function (canvas) {
var contentWidth = canvas.width
var contentHeight = canvas.height
console.log('contentWidth', contentWidth)
console.log('contentHeight', contentHeight)
var pageData = canvas.toDataURL('image/jpeg', 1.0)
var pdfX = (contentWidth + 10) / 2 * 0.7
var pdfY = (contentHeight + 500) / 2 * 0.7
var imgX = pdfX;
var imgY = (contentHeight / 2 * 0.75);
var PDF = new jsPDF('', 'pt', 'a1')
PDF.addImage(pageData, 'jpeg', 1, 1, imgX, imgY)
PDF.save(formName)
})
}