将html截图成为图片

最新推荐文章于 2024-03-18 16:07:20 发布

弃之

最新推荐文章于 2024-03-18 16:07:20 发布

阅读量243

点赞数

分类专栏：前端文章标签： html javascript 前端

本文链接：https://blog.csdn.net/weixin_44643019/article/details/126862999

版权

1. 下载html2canvas包

yarn add html2canvas

2.导入包

import html2canvas from "html2canvas"

3.使用

  //等页面元素加载完成之后在调用这个方法
savefn = () => {
    let that = this
    //#proMain:要截图的DOM元素
    //useCORS:true:解决跨域问题
    html2canvas(document.querySelector("#proMain"), { useCORS: true }).then(
      function (canvas) {
        //获取年月日作为文件名
        var timers = new Date()
        var fullYear = timers.getFullYear()
        var month = timers.getMonth() + 1
        var date = timers.getDate()
        var randoms = Math.random() + ""
        //年月日加上随机数
        var numberFileName = fullYear + "" + month + date + randoms.slice(3, 10)
        var imgData = canvas.toDataURL("image/png")
        //保存图片
        var saveFile = function (data, filename) {
          var save_link =