vue3生成海报&下载海报

1.安装依赖

npm i html2canvas

生成海报

<template>
  <div id="capture" className="view" style="background: #CCCCCC">
    <div className="title">海报</div>
    <div className="content">
      <p className="captures">内容</p>
      <p className="name">name</p>
    </div>
    <div className="BtnLogo" @click="BtnLogo">
      生成
    </div>
  </div>
</template>
<script setup>
import html2canvas from 'html2canvas'
const logo = ref('')
const logoName = ref('')
const url=ref("")
const BtnLogo = () => {
  // console.log('上传logo')
  let dpi = window.devicePixelRatio || 2
  let options = {
    useCORS: true, //跨域
    ignoreElements: false,
    scale: dpi,
  }
  html2canvas(document.querySelector('#capture'), options).then(canvas => {
    let url= canvas.toDataURL('image/png') //转base64
    document.querySelector('.captures').innerHTML = `<img src="${url}" alt="231231">` 
    //let domimg = document.querySelector('img') //复制-扩展知识
    console.log(url);
  })
}
</script>

效果

下载海报

<template>
  <div id="capture" class="view" style="background: #CCCCCC">
    <div class="title">海报</div>
    <div class="content">
      <p class="captures">内容</p>
      <p class="wenjun">网才无忧</p>
    </div>
     <div class="BtnLogo" @click="BtnLogo">
        下载
    </div>
  </div>
  </template>
  <script setup>
    import axios from "axios"
  import {uploadFile} from "./Sender/Upfile.js"  
  import html2canvas from 'html2canvas'
  const logo=ref('')
  const logoName=ref('')
  const BtnLogo=()=>{
    // console.log('上传logo')
    let dpi=window.devicePixelRatio||2
    let options={
      useCORS:true, //跨域
      ignoreElements:(ele=>{
        if (ele.id==='wenjun'){
          return true
        }
      }),
      scale:dpi,
    }
    html2canvas(document.querySelector('#capture'),options).then(canvas=>{
      canvas.toBlob(blob => {
        downloadBob(blob)
      })
    })
    
    function downloadBob(blob){
      var a=document.createElement('a')
      //本地下载路径 
      var url=window.URL.createObjectURL(blob)
      //名称
      var filename='海报.png'
      //上传到后端  
      let imgurl="https://xxxx"
      const http=new axios.create()
      http.defaults.headers["Authorization"] = "xxxx";
      const formData=new FormData()
      formData.append("file",blob)
      return new Promise((resolve, reject) => {
          http({
              url:imgurl,
              data:formData,
              method:'post',
          }).then(res=>{
              resolve(res.data.data)
          }).catch(err=>{
              reject(base64)
          })
      })
      // console.log(a)
      a.href=url;
      a.download=filename
      a.click()
      window.URL.revokeObjectURL(url)
    }
  }
  </script>