vue 将页面保存为图片下载到本地

原创已于 2023-03-06 09:01:53 修改 · 2.3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-03-02 16:08:03 首次发布

该文章介绍了如何利用html2canvas库，结合JavaScript将网页内容转化为Canvas，然后转换为图片并进行下载。主要步骤包括安装html2canvas，选取需要截屏的DOM元素，生成Canvas，调整图片格式，最后将Base64编码的图片转为Blob对象以实现本地下载。

首先先下载一个插件html2canvas帮助我们实现

npm i html2canvas

dom部分废话不多说，直接上代码

<div class="box">
      <!-- 将可保存为图片的内容 通过一个 标签 框起来 -->
      <div id="screenshot-box">
  
      </div>
      <button @click="onSaveCanvas">保存图片</button>
</div>

js逻辑

将插件导入到要使用的页面

  import html2canvas from "html2canvas";

//点击保存为Canvas
      onSaveCanvas() {
        // 这里的类名要与点击事件里的一样
        const canvas = document.querySelector("#screenshot-box");
        let that = this;
        html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
          function (canvas) {
            const type = "png";
            let imgData = canvas.toDataURL(type);
            // 图片格式处理
            let _fixType = function (type) {
              type = type.toLowerCase().replace(/jpg/i, "jpeg");
              let r = type.match(/png|jpeg|bmp|gif/)[0];
              return "image/" + r;
            };
            imgData = imgData.replace(_fixType(type), "image/octet-stream");
            let filename = "htmlImg" + "." + type;
            // 保存为文件
            //  以bolb文件下载
            that.downFileToLocal(filename, that.convertBase64ToBlob(imgData));
          }
        );
      },

// base64转化为Blob对象
      convertBase64ToBlob(imageEditorBase64) {
        let base64Arr = imageEditorBase64.split(",");
        let imgtype = "";
        let base64String = "";
        if (base64Arr.length > 1) {
          //如果是图片base64，去掉头信息
          base64String = base64Arr[1];
          imgtype = base64Arr[0].substring(
            base64Arr[0].indexOf(":") + 1,
            base64Arr[0].indexOf(";")
          );
        }
        // 将base64解码
        let bytes = atob(base64String);
        //let bytes = base64;
        let bytesCode = new ArrayBuffer(bytes.length);
        // 转换为类型化数组
        let byteArray = new Uint8Array(bytesCode);
  
        // 将base64转换为ascii码
        for (let i = 0; i < bytes.length; i++) {
          byteArray[i] = bytes.charCodeAt(i);
        }
        // 生成Blob对象（文件对象）
        return new Blob([bytesCode], { type: imgtype });
      },
      // 下载Blob流文件
      downFileToLocal(fileName, blob) {
        // 创建用于下载文件的a标签
        const d = document.createElement("a");
        // 设置下载内容
        d.href = URL.createObjectURL(blob);
        // 设置下载文件的名字
        d.download = fileName;
        // 界面上隐藏该按钮
        d.style.display = "none";
        // 放到页面上
        document.body.appendChild(d);
        // 点击下载文件
        d.click();
        // 从页面移除掉
        document.body.removeChild(d);
        // 释放 URL.createObjectURL() 创建的 URL 对象
        window.URL.revokeObjectURL(d.href);
      },

样式

#screenshot-box {
    width: 100%;
    height: 600px;
    background-color: aquamarine;
  }

完整代码

<template>
    <div class="box">
      <!-- 将可保存为图片的内容 通过一个 标签 框起来 -->
      <div id="screenshot-box">
  
      </div>
      <button @click="onSaveCanvas">保存图片</button>
    </div>
  </template>
  <script>
  //引入html2canvas
  import html2canvas from "html2canvas";
  import axios from 'axios'
  export default {
    name: "Html2Image",
    props: {
      id: {
        // id
        type: String,
        default: "export-box",
      },
      filename: {
        // 导出文件名称
        type: String,
        default: "htmlPic",
      },
      outType: {
        // 导出类型
        type: String,
        default: "png",
        validator(value) {
          return ["png", "jpg", "bmp", "jpeg", "gif"].includes(value);
        },
      },
      isFile: {
        // 是否为导出文件
        type: Boolean,
        default: false,
      },
    },
    mounted(){
      axios.post('https://api.weixin.qq.com/cgi-bin/token',{
        grant_type:'',
        appid:'',
        secret:''
      },(res)=>{
        console.log(res);
      })
      console.log(axios);
    },
    methods: {
      //点击保存为Canvas
      onSaveCanvas() {
        // 这里的类名要与点击事件里的一样
        const canvas = document.querySelector("#screenshot-box");
        let that = this;
        html2canvas(canvas, { scale: 2, logging: false, useCORS: true }).then(
          function (canvas) {
            const type = "png";
            let imgData = canvas.toDataURL(type);
            // 图片格式处理
            let _fixType = function (type) {
              type = type.toLowerCase().replace(/jpg/i, "jpeg");
              let r = type.match(/png|jpeg|bmp|gif/)[0];
              return "image/" + r;
            };
            imgData = imgData.replace(_fixType(type), "image/octet-stream");
            let filename = "htmlImg" + "." + type;
            // 保存为文件
            //  以bolb文件下载
            that.downFileToLocal(filename, that.convertBase64ToBlob(imgData));
          }
        );
      },
      // base64转化为Blob对象
      convertBase64ToBlob(imageEditorBase64) {
        let base64Arr = imageEditorBase64.split(",");
        let imgtype = "";
        let base64String = "";
        if (base64Arr.length > 1) {
          //如果是图片base64，去掉头信息
          base64String = base64Arr[1];
          imgtype = base64Arr[0].substring(
            base64Arr[0].indexOf(":") + 1,
            base64Arr[0].indexOf(";")
          );
        }
        // 将base64解码
        let bytes = atob(base64String);
        //let bytes = base64;
        let bytesCode = new ArrayBuffer(bytes.length);
        // 转换为类型化数组
        let byteArray = new Uint8Array(bytesCode);
  
        // 将base64转换为ascii码
        for (let i = 0; i < bytes.length; i++) {
          byteArray[i] = bytes.charCodeAt(i);
        }
        // 生成Blob对象（文件对象）
        return new Blob([bytesCode], { type: imgtype });
      },
      // 下载Blob流文件
      downFileToLocal(fileName, blob) {
        // 创建用于下载文件的a标签
        const d = document.createElement("a");
        // 设置下载内容
        d.href = URL.createObjectURL(blob);
        // 设置下载文件的名字
        d.download = fileName;
        // 界面上隐藏该按钮
        d.style.display = "none";
        // 放到页面上
        document.body.appendChild(d);
        // 点击下载文件
        d.click();
        // 从页面移除掉
        document.body.removeChild(d);
        // 释放 URL.createObjectURL() 创建的 URL 对象
        window.URL.revokeObjectURL(d.href);
      },
    },
  };
  </script>
  <style scoped>
  #screenshot-box {
    width: 100%;
    height: 600px;
    background-color: aquamarine;
  }
  </style>