需求是将页面存在图表转换成图片的方式传给后端,然后后端生成word文档图表使用的是echarts,如果只单独截图表部分的话可以使用echarts自带的api。但是!内容包含其他部分。于是就使用html2canvas
1:安装
npm i html2canvassave
2:引入
import html2canvas fromhtml2canvas
3: 使用

//xxx代表你要截取dom元素
      html2canvas(xxx, {
            useCORS: true, //跨域
            scale: 0.5  //根据需要配置缩放比例
          }).then(canvas => {
           //生成base64
            let dataUrl = canvas.toDataURL('image/png');
            //后端要求传file对象
            //先转换成blob,再转成file
            let blob = this.dataURLtoBlob(dataUrl);
            let file = this.blobToFile(blob, imageName+ '.png');
          })
          //转成blob
      dataURLtoBlob(dataurl) {
            let arr = dataurl.split(","),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]),
            n = bstr.length,
            u8arr = new Uint8Array(n);
            while (n--) {
              u8arr[n] = bstr.charCodeAt(n);
             }
             return new Blob([u8arr], {
                type: mime
             });
    },

     //转成file
       blobToFile(theBlob, fileName) {
          let file = new File([theBlob], fileName, {
          type: 'image/png',
          lastModified: Date.now()
           });
          return file;
        },

原文地址:https://blog.csdn.net/qq_42727641/article/details/127576818

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_38232.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注