js生成pdf并自动上传

1.生成pdf前要让js选中生成pdf部分的dom
<div id="printPageFirst"> pdf内容区 </div>
2.使用两个插件,import到项目里,然后是获取dom进行生成pdf操作

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 })
}

相关推荐

  1. js生成pdf自动

    2023-12-06 00:30:27       60 阅读
  2. js生成pdf

    2023-12-06 00:30:27       105 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2023-12-06 00:30:27       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2023-12-06 00:30:27       106 阅读
  3. 在Django里面运行非项目文件

    2023-12-06 00:30:27       87 阅读
  4. Python语言-面向对象

    2023-12-06 00:30:27       96 阅读

热门阅读

  1. ES6之原始数据类型Symbol

    2023-12-06 00:30:27       49 阅读
  2. Oracle连接和使用

    2023-12-06 00:30:27       65 阅读
  3. Mysql中的正经行锁、间隙锁和临键锁

    2023-12-06 00:30:27       63 阅读
  4. FFmpeg命令行使用小结

    2023-12-06 00:30:27       56 阅读
  5. 如何使用ffmpeg转换图片格式

    2023-12-06 00:30:27       53 阅读
  6. 电商产品经理常用的ChatGPT通用提示词模板

    2023-12-06 00:30:27       54 阅读
  7. mysql使用--备份与恢复

    2023-12-06 00:30:27       55 阅读
  8. vue-template-compiler 的原理

    2023-12-06 00:30:27       51 阅读
  9. 【QT深入理解】QT中的几种常用的排序函数

    2023-12-06 00:30:27       47 阅读