[vue] 导出图片

最新推荐文章于 2024-06-06 10:02:08 发布

原创最新推荐文章于 2024-06-06 10:02:08 发布 · 376 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #ecmascript

vue 专栏收录该内容

175 篇文章

订阅专栏

该文章介绍了如何在Vue项目中利用html2canvas库进行页面截图。首先通过npm安装html2canvas，然后导入并创建截图函数，设置canvas尺寸，调用html2canvasAPI，最后将canvas转换为blob并下载为图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

npm install --save html2canvas

import html2canvas from "html2canvas"

    create_image() {
      let shareContent = this.$refs.capture //需要截图的包裹的（原生的）DOM 对象
      let canvas = document.createElement('canvas') //创建一个canvas节点
      let scale = 1 //当前节点的1倍像素
      // let scale = 1.5 //当前节点的1.5倍像素
      // let scale = window.devicePixelRatio //视网膜屏幕，设备像素比，好的显示器是2，普通显示器的是1。
      canvas.width = shareContent.offsetWidth * scale //获取dom 宽度* 定义canvas 宽度 * 缩放
      canvas.height = shareContent.offsetHeight * scale //获取dom 高度*定义canvas高度 *缩放
      canvas.getContext('2d').scale(scale, scale) //获取context,设置scale
      html2canvas(shareContent, {
        dpi: window.devicePixelRatio,
        scale: scale, // 添加的scale 参数
        useCORS: true,
        canvas: canvas, //自定义 canvas
        logging: true, //日志开关
      }).then((canvas) => {
        canvas.toBlob(
          function (blob) {
            const eleLink = document.createElement('a')
            eleLink.download = `《导出的名字》.png`
            eleLink.style.display = 'none'
            eleLink.href = URL.createObjectURL(blob)
            document.body.appendChild(eleLink)
            eleLink.click()
            document.body.removeChild(eleLink)
          },
          'image/png',
          1
        )
      })
    },

参考：

vue 导出图片