页面设计在哪打开_贵阳做网络推广的公司_短视频代运营方案策划书_快速排名优化推广手机

我最近做了什么

想写很多，但是现在想不起来。。。后边再来加。。。

1、html转pdf

需要的库：

"html2canvas": "^1.4.1",
"jspdf": "^2.5.2", 

思路：

我尝试纯JS转PDF，发现有些样式无法生效，字体乱码配置太麻烦，所以放弃了
选择了比较笨的，先截图，然后图片放PDF，虽然笨但是结果有保证，除了可能会糊一点，其他没得问题
包括我们本来要对JS解读半天研究他的API，现在有啥想法直接改DOM，爽了不止一点儿

创建工具类：

import html2canvas from 'html2canvas'
import jsPDF from 'jspdf'export const downloadPDF = async page => {const canvas = await html2canvas(page, {useCORS: true, //允许canvas画布内 可以跨域请求外部链接图片, 允许跨域请求。allowTaint: true, //允许跨域scale: 2, //设置放大倍数backgroundColor: '#ffffff', //背景色})const pdf = canvas2PDF(canvas)return pdf
}const canvas2PDF = canvas => {// 新建JsPDF对象const PDF = new jsPDF({orientation: 'p', //参数： l：横向  p：纵向unit: 'mm', //参数：测量单位（'pt'，'mm', 'cm', 'm', 'in' or 'px'）format: 'a4', //A4纸})const ctx = canvas.getContext('2d')const a4w = 760const a4h = 1108 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277// const a4w = 190// const a4h = 277 //A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277const imgHeight = Math.floor((a4h * canvas.width) / a4w) //按A4显示比例换算一页图像的像素高度let renderedHeight = 0while (renderedHeight < canvas.height) {let page = document.createElement('canvas')page.width = canvas.widthpage.height = Math.min(imgHeight, canvas.height - renderedHeight) //可能内容不足一页//用getImageData剪裁指定区域，并画到前面创建的canvas对象中page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)// canvas转图片数据保留10mm边距PDF.addImage(page.toDataURL('image/jpeg', 0.2), 'JPEG', 10, 10, a4w, Math.min(a4h, (a4w * page.height) / page.width))renderedHeight += imgHeight//判断是否分页，如果后面还有内容，添加一个空页if (renderedHeight < canvas.height) {PDF.addPage()}}PDF.save('导出.pdf') // 浏览器保存一下看看return PDF
}

调用，很傻但很好用

getpdfHtml() {let container = document.createElement('div')container.innerHTML = `<div style="xxx"><div>111</div><div>222</div></div>`document.body.appendChild(container)return container},async onSubmit() {const pdfDom = this.getpdfHtml() // 获取想要生成pdf的domconst pdfFile = await downloadPDF(pdfDom) // pdfDom.parentNode.removeChild(pdfDom)
}