前端自适应页面导出pdf,不分页

本文介绍了如何使用html2canvas和JsPDF库将前端自适应页面内容转换为PDF文件,并确保不分页。通过获取页面DOM元素,调整尺寸,然后利用canvas将内容转化为图片,最后利用JsPDF将图片添加到PDF中并保存。
摘要由CSDN通过智能技术生成

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

const htmlToPdf = {

  getPdf (title) {

    var shareContent = document.querySelector('#pdfDom')

    var width = shareContent.offsetWidth / 4

    var height = shareContent.offsetHeight / 4

    html2Canvas(document.querySelector('#pdfDom'), {

      allowTaint: true

    }).then(canvas => {

      var context = canvas.getContext('2d')

      context.mozImageSmoothingEnabled = false

      context.webkitImageSmoothingEnabled = false

      context.msImageSmoothingEnabled = false

      context.imageSmoothingEnabled = false

      var pageData = canvas.toDataURL('image/jpeg', 1.0)

      var img = new Image()

      img.src = pageData

      img.onload

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值