首页 > 其他分享 >借助html2canvas下载图片,有滚动条的情况显示不全的问题

借助html2canvas下载图片,有滚动条的情况显示不全的问题

时间:2023-09-06 15:00:14浏览次数:31  
标签:html2canvas style const image 不全 滚动条 targetDom

我自己的遇到的情况是将页面的一个小窗口里边的内容生成图片下载,

试了网上搜到的几个方法都没有生效,

最后自己用了个取巧的方法:通过调整overflow-y来解决这个问题。

downloadItem() {
      const targetDom = document.getElementById(`image-${this.dialogNo}`)
      targetDom.style.overflowY = 'visible'
      html2canvas(targetDom, {
        useCORS: true,
        backgroundColor: '#ffffff',
        height: targetDom.scrollHeight,
        windowHeight: targetDom.scrollHeight
      }).then(canvas => {
        const canvasImg = canvas.toDataURL('image/png')
        ...
        targetDom.style.overflowY = 'auto'
      })
    }

 

标签:html2canvas,style,const,image,不全,滚动条,targetDom
From: https://www.cnblogs.com/jiajiaxu/p/17682314.html

相关文章

  • css设置滚动条样式
    首先给父盒子设置overflow:hidden;overflow-y:scroll;overflow-x:scroll;这样子盒子超出父级的高度和宽度时就会出现滚动条接着调整滚动条样式/*里面的代码可以根据自己需求去进行更改*//*设置滚动条的样式*/::-webkit-scrollbar{width:12px;}/*滚动槽*/......
  • Unity UGUI的Scrollbar(滚动条)组件的介绍及使用
    UnityUGUI的Scrollbar(滚动条)组件的介绍及使用一、什么是Scrollbar组件?Scrollbar组件是Unity中UGUI系统提供的一种UI组件,主要用于在UI界面中提供滚动条功能,使用户可以通过滚动条来查看超出屏幕范围的内容。二、Scrollbar组件是如何工作的?Scrollbar组件的工作原理主要是通过改......
  • Webkit 实现页面滚动条美化
    当页面或者某个容器布局内容超出过后,就会有滚动条,但默认的有点丑,经常需要自己来美化一下,这里做个笔记吧./*美化全局的滚动条*/::-webkit-scrollbar{width:4px;height:6px;}::-webkit-scrollbar-corner{display:block;}::-webkit-scrollbar-thumb{......
  • el-table不出现滚动条
    修改样式的时候,发现没出现自己想要的效果,用div重新布局以后,发现效果是出现了,但el-table滚动条不见了。解决:<divstyle="padding:2px;height:600px"><el-tablev-loading="loading":data="list"highlight-current-rowsty......
  • iOS开发之--全局解决模态弹出不全屏展示问题
    利用tuntime的特性,创建一个UIViewController的类别,然后再pch文件里面调用即可,代码如下:.h#import<UIKit/UIKit.h>NS_ASSUME_NONNULL_BEGIN@interfaceUIViewController(SKPVCModel)@endNS_ASSUME_NONNULL_END.m#import"UIViewController+SKPVCModel.h"#import<objc/ru......
  • echarts柱状图数据太多设置滚动条
    转自:https://blog.csdn.net/weixin_42728767/article/details/131303246当你的项目中因数据量太大,导致柱状图数据全部叠在一起不便于看的时候,你们是怎么处理的?大部分同学可能第一想法就是裁剪一部分数据,仅展示页面最大限度能够展示的数据,这确实是一个好办法,简单快速。但有时候怎么......
  • Duilib VerticalLayout 滚动条绘制出错问题
    发现一个奇怪的问题,某个VerticalLayout添加多个控件,滚动条能正常显示但是滚动的时候,绘制出错,如下图: 后来发现xml添加属性bkcolor="#FF0F1415"后正常,应该是缺少bkcolor属性导致绘制异常 记录一下~......
  • 【PYQT5】textEdit滚动条跟踪内容向下
    classMain(QWidget,Ui_Form):def__init__(self):super(Main,self).__init__()self.setupUi(self)self.textEdit.setReadOnly(True)#设置为只读QTimer.singleShot(0,self.thread_check)#延迟执行#textEdit......
  • QComboBox在ubuntu下不显示滚动条问题,下拉框出现位置不固定问题,设置显示最大数量不生
    这里的Ubuntu指的是银河麒麟,问题也是在麒麟下出现的。没有在Ubuntu试过是否有同样的问题。但是估计也差不多,毕竟国产系统跟Ubuntu本来就纠缠不清。用QT写了一个QComboBox,自定义了一些样式,在Windows下显示正常,但是在Ubuntu下不显示滚动条,下拉框位置根据当前选项变化而不是固定显示......
  • WPF自定义TreeView滚动条样式
     根据客户需求,要在TreeView目录树上显示10万+个节点,但是目录树显示10万加节点后,整个页面操作起来非常卡,所以给目录树增加了虚拟化设置。但是虚拟化设置一直没生效,后来经过排查发现是使用的自定义滚动条导致了虚拟化设置没有生效,后来自己写了一个滚动条样式,问题解决了。目录树虚......