html2canvas将dom 转换成图片并上传

最新推荐文章于 2024-07-23 11:18:48 发布

With Me

最新推荐文章于 2024-07-23 11:18:48 发布

阅读量632

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/weixin_44056936/article/details/128497763

版权

 /// .pdf  dom元素
let node = document.querySelector('.pdf')
//解决图片灰色阴影偏移问题
let menuitemWidth = document.querySelector('.theme-dark').offsetWidth
node.style.cssText = `margin-left:-${menuitemWidth}px;margin-top:-90px`
this.$nextTick(() => {
  html2canvas(node, {
    useCORS: true,
    height: node.offsetHeight,
    width: node.offsetWidth,
    height: node.scrollHeight,
    windowHeight: node.scrollHeight,
    scrollY: 0,
    scrollX: 0
  }).then(async (canvas) => {
    //this.showButton = true
    node.style.cssText = 'height:unset;margin:unset'
    var url = canvas.toDataURL(); //图片地址
    let formData = new FormData();
    // this.dataURLtoFile 方法 => 转换为文件流
    formData.append('file', this.dataURLtoFile(url, '周报'))
    formData.append("kanBanName", this.title);
    formData.append("historyId", this.kanbanHistoryInfoId);
    // this.reportFormLoading = true
    uploadFile(formData).then((res) => {
    
    }).catch((err) => {
      console.log(err);
    })
    // let oImg = new Image();
    // oImg.src = canvas.toDataURL(); // 导出图片
    // document.body.appendChild(oImg); // 将生成的图片添加到body
  }).catch((err)=>{
    console.log('err1',err);
  })
})

dataURLtoFile(dataurl, filename) {
 // 获取到base64编码
 const arr = dataurl.split(',')
 // 将base64编码转为字符串
 const bstr = window.atob(arr[1])
 let n = bstr.length
 const u8arr = new Uint8Array(n) // 创建初始化为0的，包含length个元素的无符号整型数组
 while (n--) {
   u8arr[n] = bstr.charCodeAt(n)
 }
 return new File([u8arr], filename, {
   type: 'image/png'
 })
},