前端实现将当前页面内容下载成图片（图片可做到高清画质）

news2024/12/28 14:38:16

插件背景：

html2canvas可以把你想要转变的元素变为图片，使用file-saver下载图片。

1、安装html2canvas、file-saver

npm install html2canvas

npm install file-saver --save

2、在Vue组件中引入并使用`html2canvas、file-saver`

import html2canvas from 'html2canvas'
import { saveAs } from 'file-saver'

3、点击按钮调用html2canvas相关方法进行下载

示例代码如下：

注意：

1、过度增加 scale 可能会导致生成的图片质量提高但文件大小增加，并可能对性能产生负面影响。因此，应该根据实际需求和页面内容来选择合适的 scale 值。

2、要生成图片的dom中部分样式属性转化成图片后无法体现，如box-shadow属性，生成后的图片将丢失这个属性样式，因此我们需要使用border属性来实现边框样式让生成的图片内容显示边框样式。

<el-button :loading="loading" @click.stop="saveImg">下载</el-button>

saveImg() {
      this.loading = true
      const content = this.$refs.screenshot // 要下载成图片的dom
      if (!content) {
        this.loading = false
        return
      }
      html2canvas(content, {
        scale: 2, // 放大倍数，支持小数，可以控制清晰度
        letterRendering: true,
        backgroundColor: '#F2F4F3',
        height: this.$refs.screenshot.clientHeight - 70 // 要转化为图片下载的dom 高度
      }).then((canvas) => {
        canvas.toBlob(blob => {
          this.loading = false
          saveAs(blob, `Oferta para ${this.infoItem?.candidateName} .png`)
        }, 'image/png')
      })
    }