vue前端下载某一区域为照片格式

1.需求背景

项目中，需要对某一区域进行下载，要求已照片格式去下载

（例如一个div盒子，里面有以上的字，以照片文件格式下载到本地）

2.代码

const downloadView = ref();
const imgName = ref('小程序码');
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
const submitDownLoad = () => {
  console.log(downloadView.value);
  const content = downloadView.value;
  if (!content) {
    return;
  }
  if (codeType.value) {
    nextTick(() => {
      html2canvas(content, {
        scale: 2, // 放大倍数，支持小数，可以控制清晰度
        letterRendering: true,
        proxy: true,
        useCORS: true,
        // backgroundColor: null,
        // height: downloadView.value.clientHeight - 70 // 要转化为图片下载的dom 高度
        height: downloadView.value.clientHeight // 要转化为图片下载的dom 高度
      }).then(canvas => {
        canvas.toBlob(blob => {
          saveAs(blob, `${imgName.value} .png`);
        }, 'image/png');
      });
    });
    downloadVisible.value = false;
  } else {
    message.error('生成小程序码错误');
    // downloadVisible.value = false;
  }
};