vue项目中使用html2canvas 下载当前页面（动态页面宽度、高度）_canvas 页面

最新推荐文章于 2024-08-05 09:36:28 发布

2401_84620288

最新推荐文章于 2024-08-05 09:36:28 发布

阅读量452

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84620288/article/details/138964332

版权

程序员专栏收录该内容

87 篇文章 0 订阅

订阅专栏

总结

框架原理真的深入某一部分具体的代码和实现方式时，要多注意到细节，不要只能写出一个框架。
算法方面很薄弱的，最好多刷一刷，不然影响你的工资和成功率😯
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

喜欢这篇文章文章的小伙伴们点赞+转发支持，你们的支持是我最大的动力！

npm isntall html2canvas 或者
cnpm isntall html2canvas

二、在vue项目使用的页面里面引入插件

import html2canvas from 'html2canvas'

三、设置截图区域的dom 的div标签的ref 3-1、当前页面可视区域的内容截屏下载

      <el-row style="margin-bottom:10px">
        <el-button type="primary" icon="el-icon-upload" @click="screenShot()">截屏</el-button>
      </el-row>

      <div ref="screen">
        <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight">
          你的浏览器还不支持canvas
        </canvas>
      </div>

3-2、只要上图红色区域的内容下载，就需要计算红色区域的内容的动态宽度、高度

      <div ref="screen" :style="{width: canvasWidth, height: canvasHeight}">
        <canvas id="myCanvas" :width="canvasWidth" :height="canvasHeight">
          你的浏览器还不支持canvas
        </canvas>
      </div>

四、截图并下载图片到本地

//截屏
screenShot () {
　html2canvas(this.$refs.screen, {
　　　backgroundColor: '#FFFFFF',
     useCORS: true
　}).then((canvas) => {
    if (navigator.msSaveBlob) { // IE10+ 
      let blob = canvas.msToBlob(); 
      return navigator.msSaveBlob(blob, name); 


### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

![](https://img-blog.csdnimg.cn/img_convert/8294552fd03beb94805a8d8076cbe00a.webp?x-oss-process=image/format,png)


，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中...(img-6DkAuQ4a-1715845685249)]