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 })
}
相关推荐
Smile_Gently2 小时前
前端:最简单封装nmp插件(组件)过程。
前端·javascript·vue.js·elementui·vue
IT利刃出鞘7 小时前
禁止WPS强制打开PDF文件
pdf
nihui1237 小时前
Uniapp 实现顶部标签页切换功能?
javascript·vue.js·uni-app
luckycoke8 小时前
小程序立体轮播
前端·css·小程序
一 乐8 小时前
高校体育场管理系统系统|体育场管理系统小程序设计与实现(源码+数据库+文档)
前端·javascript·数据库·spring boot·高校体育馆系统
懒羊羊我小弟8 小时前
常用Webpack Loader汇总介绍
前端·webpack·node.js
shengmeshi8 小时前
vue3项目img标签动态设置src,提示:ReferenceError: require is not defined
javascript·vue.js·ecmascript
BillKu9 小时前
vue3中<el-table-column>状态的显示
javascript·vue.js·elementui
祈澈菇凉9 小时前
ES6模块的异步加载是如何实现的?
前端·javascript·es6
我爱学习_zwj9 小时前
4.从零开始学会Vue--{{组件通信}}
前端·javascript·vue.js·笔记·前端框架