Vue js HTML2canvas 下载图片到指定地址

可以通过以下步骤在 Vue.js 中使用 HTML2canvas 下载图片到指定地址：

1. 首先，你需要在你的 Vue.js 项目中安装 html2canvas。你可以使用 npm 包管理器来安装它，命令如下：

npm install html2canvas --save

2. 在你的 Vue.js 组件中引入 html2canvas：

import html2canvas from 'html2canvas';

3. 在 Vue.js 组件中创建一个方法来处理下载图片的逻辑：

methods: {
  downloadImage() {
    // 获取需要下载的元素
    const element = document.getElementById('image');

    // 使用 html2canvas 将元素转换为 canvas
    html2canvas(element).then(canvas => {
      // 将 canvas 转换为图片 URL
      const imageUrl = canvas.toDataURL('image/png');

      // 创建一个链接
      const link = document.createElement('a');
      link.href = imageUrl;

      // 设置链接的下载属性和文件名
      link.download = 'image.png';

      // 将链接添加到页面并点击下载
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
  }
}

4. 在 Vue.js 模板中，添加一个按钮并绑定 downloadImage 方法：

<template>
  <div>
    <div id="image">
      <!-- 这里是需要下载的元素内容 -->
    </div>
    <button @click="downloadImage">下载图片</button>
  </div>
</template>

5. 最后，你可以在 downloadImage 方法中指定图片下载的地址。例如，你可以将图片下载到本地文件系统中：

link.href = imageUrl.replace(/^data:image\/[^;]/, 'data:application/octet-stream');
link.target = '_blank';
link.download = 'image.png';
link.click();

这样，当用户点击下载按钮时，图片将被下载到本地文件系统中。