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

本文主要是介绍前端实现将当前页面内容下载成图片（图片可做到高清画质），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

插件背景：

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

1、安装html2canvas、file-saver

npm install html2canvasnpm 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 = trueconst content = this.$refs.screenshot // 要下载成图片的domif (!content) {this.loading = falsereturn}html2canvas(content, {scale: 2, // 放大倍数，支持小数，可以控制清晰度letterRendering: true,backgroundColor: '#F2F4F3',height: this.$refs.screenshot.clientHeight - 70 // 要转化为图片下载的dom 高度}).then((canvas) => {canvas.toBlob(blob => {this.loading = falsesaveAs(blob, `Oferta para ${this.infoItem?.candidateName} .png`)}, 'image/png')})}