html2canvas +pdf 生成pdf 一些点记录

JAVA5G

已于 2024-03-18 18:59:04 修改

阅读量552

点赞数 1

分类专栏： vue html2canvas 文章标签： java 开发语言

于 2022-09-01 15:14:31 首次发布

本文链接：https://blog.csdn.net/java5g/article/details/126643188

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

html2canvas

2 篇文章 0 订阅

订阅专栏

模糊

提示：生成出来的模糊及图片跨域处理方案
例如：

html2canvas(id, {
    allowTaint: false,
    useCORS: true,
    crossOrigin: 'anonymous',
    width: targetDom.width,
    scale: 2, //按比例增加分辨率 (2=双倍).
    dpi: window.devicePixelRatio * 2, //设备像素比
  })

模糊： scale: 2, //按比例增加分辨率 (2=双倍).
dpi: window.devicePixelRatio * 2, //设备像素比
图片跨域处理：allowTaint: false,
useCORS: true,

走势图用的echart 生成出来模糊

提示：用的走势图都是echart模糊

把这个转换成图片再去生成 echarts.init(document.getElementById('myChart'), null, {renderer: 'svg'})
采用canvans渲染，devicePixelRatio调整清晰度echarts.init(document.getElementById('myChart'), null, {devicePixelRatio: 2.5})

生成固定尺寸的 pdf

提示：一般都是A4尺寸
例如：

let PDF = new jsPDF('p', 'px', [Width, Height])
html2canvas(id, {

width: targetDom.width,

})

一些区域单块模糊

提示：看下页面是不是用的图片做的背景是的话拿出来用img标签去展示就可以了

生成关键代码

//htmL转图片 贴到pdf里 id就是要生成的 targetDom 这里放的要生成的宽高尺寸 我这是是 375跟 525 px
 html2canvas(id, {
    allowTaint: false,
    useCORS: true,//是否支持跨域
    crossOrigin: 'anonymous',
    width: targetDom.width,
    scale: 2, //按比例增加分辨率 (2=双倍).
    dpi: window.devicePixelRatio * 2, //设备像素比
  }).then(function (canvas) {
    let pdfHeight = targetDom.height
    let pdfWidth = targetDom.width
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = (contentWidth / pdfWidth) * pdfHeight
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = pdfWidth
    let imgHeight = (pdfWidth / contentWidth) * contentHeight
    console.log('imgHeight===' + imgHeight)
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new jsPDF('p', 'px', [pdfWidth, pdfHeight])
    if (leftHeight < pageHeight) {
      PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
    } else {
      while (leftHeight > 0) {
        PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
        leftHeight -= pageHeight
        position -= pdfHeight
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    PDF.save(title + '.pdf')
  })