将html转成图片并下载到本地

最新推荐文章于 2025-10-02 19:43:07 发布

原创

最新推荐文章于 2025-10-02 19:43:07 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #javascript #前端

本文介绍了如何使用html2canvas库将HTML内容转化为Base64格式的图片，并进一步将其转换为真实图片，通过构建a标签实现本地下载。

一. 步骤

html2canvas 将html转为base64；html2canvas 的引入和基本使用
将base64转为bold;
构建a标签，通过a标签下载图片；

二. 代码

<template>
  <div class="app-container">
    <div class="posterBox" id="poster">
      在这里放需要转成图片的html,我当时需要的是一张课程表
    </div> 
    <!-- <img :src="base64Str" alt="" style="height:400px" mode="heightFix"> -->
    <el-button icon="el-icon-download" type="success" size="small" @click="getImg">下载课表</el-button>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
export default {
   
   
  name: 'Schedule',
  computed: {
   
   
    ...mapGetters([
      'name'
    ])
  },
  data() {
   
   
    return {
   
   
      base64Str: '' // base64图片数据
    }
  },
  created() {
   
   
    
  },
  mounted()