vue中将html转成canvas再转成图片下载到本地

最新推荐文章于 2024-01-15 14:00:20 发布

嘿嘿吼嘿

最新推荐文章于 2024-01-15 14:00:20 发布

阅读量1.6k

点赞数 3

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/weixin_44217525/article/details/106539305

版权

本文介绍了如何在Vue项目中使用html2canvas库将HTML内容转换为Canvas，进一步转换为图片并允许用户下载到本地。主要步骤包括全局安装html2canvas，引入和注册到所需页面，以及实现点击下载功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue中将html转成img并下载到本地

1、在项目中全局安装 html2canvas

npm install --save html2canvas

2、在需要的页面引入并注册

 import html2canvas from 'html2canvas'
 components: {
    html2canvas
 },

3、点击下载当前页

在这里插入图片描述

// 下载当前页
    download () {
      this.$nextTick(() => {
      // captureId是需要下载的页面
        html2canvas(document.querySelector('#captureId')).then(canvas => {
          // console.log(canvas)
          // 兼容ie
          if(window.navigator.msSaveBlob){
            var blob = canvas.msToBlob()
            window.navigator.msSaveBlob(blob, '码单.png')
          } else {
            var url = canvas.toDataURL()     //把canvas转成base64
            // <a id="tttt" href=

最低0.47元/天解锁文章