js生成pdf并自动上传

1.生成pdf前要让js选中生成pdf部分的dom
<div id="printPageFirst"> pdf内容区 </div>

2.使用两个插件,import到项目里,然后是获取dom进行生成pdf操作

javascript 复制代码
import html2canvas from 'html2canvas'
import JsPDF from 'jspdf'
function createPdf() {
  html2canvas(document.getElementById('printPageFirst'), {
    allowTaint: true,
    taintTest: false,
    useCORS: true,
    dpi: window.devicePixelRatio * 4,
    scale: 4
  }).then(canvas => {
    let contentWidth = canvas.width
    let contentHeight = canvas.height
    let pageHeight = (contentWidth / 592.28) * 841.89
    let leftHeight = contentHeight
    let position = 0
    let imgWidth = 595.28
    let imgHeight = (592.28 / contentWidth) * contentHeight
    let pageData = canvas.toDataURL('image/jpeg', 1.0)
    let PDF = new JsPDF('', 'pt', 'a4')
    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 -= 841.89
        if (leftHeight > 0) {
          PDF.addPage()
        }
      }
    }
    // PDF.save() 此方法可以将pdf直接保存本地
    let pdfData = PDF.output('datauristring') // 获取base64Pdf
    let files = dataURLtoFile(pdfData, props.title + '封面.pdf') // 将base64文件转化为流,上传oss
    uploadFiles(files)
  })
}
function uploadFiles(files) {
  let formData = new FormData()
  formData.append('file', files)
  request
    .post('/api/oss/img', formData, { timeout: 20000 })
    .then(res => {
      let fileUrl = res.fileUrl
      // 拿到pdf在服务器的地址后,再自己做后续操作
    })
    .catch(() => {
    })
}
function dataURLtoFile(dataurl, filename) {
  let arr = dataurl.split(',')
  let mime = arr[0].match(/:(.*?);/)[1]
  let bstr = atob(arr[1])
  let n = bstr.length
  let u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  return new File([u8arr], filename, { type: mime })
}
相关推荐
white-persist4 分钟前
JWT 漏洞全解析:从原理到实战
前端·网络·python·安全·web安全·网络安全·系统安全
果粒chenl25 分钟前
React学习(四) --- Redux
javascript·学习·react.js
IT_陈寒35 分钟前
React 性能优化:5个实战技巧让首屏加载提升50%,开发者亲测有效!
前端·人工智能·后端
rising start1 小时前
前端基础一、HTML5
前端·html·html5
Never_Satisfied1 小时前
在JavaScript / HTML中,div容器在内容过多时不显示超出的部分
开发语言·javascript·html
鬼谷中妖1 小时前
JavaScript 循环与对象:深入理解 for、for...in、for...of、不可枚举属性与可迭代对象
前端
大厂码农老A1 小时前
你打的日志,正在拖垮你的系统:从P4小白到P7专家都是怎么打日志的?
java·前端·后端
im_AMBER1 小时前
CSS 01【基础语法学习】
前端·css·笔记·学习
DokiDoki之父1 小时前
前端速通—CSS篇
前端·css
pixle01 小时前
Web大屏适配终极方案:vw/vh + flex + clamp() 完美组合
前端·大屏适配·vw/vh·clamp·终极方案·web大屏