html2canvas: конвертировать страницы в изображения и PDF

1 Обзор

Ссылка на официальный сайт html2canvas

2. Используйте

1. Перенос фотографий

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, // 必须false才会自动加上正确的Content-Type
           processData: false, // 必须false才会避开jQuery对 formdata 的默认处理,XMLHttpRequest会对 formdata 进行正确的处理
           success: function (res) {
    
    

               let url = ""
               let link = document.createElement('a')
               link.style.display = 'none'
               link.href = url
               document.body.appendChild(link)
               link.click()
               // 释放URL对象所占资源
               window.URL.revokeObjectURL(url)
               // 用完即删
               document.body.removeChild(link)

               //下载之后删除iframe
               document.querySelector('html').remove();
           },
           error: function (res) {
    
    
               alert(res.message)
           }
       });
   })
})

2. Конвертировать в 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) {
    
    
			/**jspdf将html转为pdf一页显示不截断，整体思路：
			 * 1. 获取DOM
			 * 2. 将DOM转换为canvas
			 * 3. 获取canvas的宽度、高度（稍微大一点）
			 * 4. 将pdf的宽高设置为canvas的宽高
			 * 5. 将canvas转为图片
			 * 6. 实例化jspdf，将内容图片放在pdf中（因为内容宽高和pdf宽高一样，就只需要一页，也防止内容截断问题）
			 */

				// 得到canvas画布的单位是px 像素单位
			var contentWidth = canvas.width
			var contentHeight = canvas.height

			console.log('contentWidth', contentWidth)
			console.log('contentHeight', contentHeight)
			// 将canvas转为base64图片
			var pageData = canvas.toDataURL('image/jpeg', 1.0)

			// 设置pdf的尺寸，pdf要使用pt单位 已知 1pt/1px = 0.75   pt = (px/scale)* 0.75
			// 2为上面的scale 缩放了2倍
			var pdfX = (contentWidth + 10) / 2 * 0.7
			var pdfY = (contentHeight + 500) / 2 * 0.7 // 500为底部留白

			// 设置内容图片的尺寸，img是pt单位
			var imgX = pdfX;
			var imgY = (contentHeight / 2 * 0.75); //内容图片这里不需要留白的距离

			// 初始化jspdf 第一个参数方向：默认''时为纵向，第二个参数设置pdf内容图片使用的长度单位为pt，第三个参数为PDF的大小，单位是pt
			var PDF = new jsPDF('', 'pt', 'a1')
			// 将内容图片添加到pdf中，因为内容宽高和pdf宽高一样，就只需要一页，位置就是 0,0
			PDF.addImage(pageData, 'jpeg', 1, 1, imgX, imgY)
			PDF.save(formName)
		})
	}