当前位置: 首页 > 知识库问答 >
问题:

HTML2Canvas只呈现屏幕上可见的内容

元俊雅
2023-03-14

我使用HTML2Canvas渲染两个反应组件,问题是文档的输出只呈现屏幕上可见的内容,所以如果组件的内容很短,我可以看到pdf中的所有内容,但是,如果内容很长,我需要滚动到页面的顶部,使其工作,或者我需要将我的导航缩放到50%,然后单击print
我的代码中是否有错误:

import React, {Component, PropTypes} from 'react';
import html2canvas from 'html2canvas';
import domtoimage from 'dom-to-image';

import jsPDF from 'jspdf';
import Pie from './Pie.js';
import Post from './Post.js';

class Qu extends Component {
  constructor(props) {
    super(props);
  }

  printDocument() {
    const input = document.getElementById('divToPrint');
    html2canvas(input)
    
      .then((canvas) => {
        
        let imgWidth = 208;
        let imgHeight = canvas.height * imgWidth / canvas.width;
        const imgData = canvas.toDataURL('img/png');
        const pdf = new jsPDF('p', 'mm', 'a4');
        pdf.addImage(imgData, 'PNG', 0, 0, imgWidth, imgHeight);
        pdf.save("download.pdf");
      })
    ;
  }

  render() {
    return (<div>
    
      <div id="divToPrint" className="mt4" style={{
                width: '100%',
                minHeight: '29.7cm',
                border: '1px #D3D3D3 solid',
                borderRadius: '5px',
                background: 'white',
                boxShadow: '0 0 5px rgba(0, 0, 0, 0.1)',
                size: 'A4',
                margin: 'auto'
            }}>
      
        <div><Pie /></div>
        <div><Pie /></div>
        <div className="mb5">
        <button onClick={this.printDocument}>Print</button>
      </div>
      </div>
    </div>);
  }
}
export default Qu;

共有1个答案

许安邦
2023-03-14

解决方案是:添加window.scrollTo(0,0);就在html2CAN as(输入)之前

 类似资料:
  • 我正在尝试使用HTML2Canvas呈现div的内容。以下是代码: 我正在使用v5 beta 3。 当此代码运行时,它仅呈现屏幕上可见的内容。div基本上是整个页面,减去页眉和页脚。此div中的所有内容都可以通过滚动显示(有一些隐藏元素,但我不希望隐藏元素在图像中可见) 我找不到哪里出了问题,也找不到为什么它不能保存整个div。我还应该注意,图像似乎与div一样高,但只是部分可见。 举一个例子来说

  • 我在使用html2canvas。js库,用于与selenium一起拍摄全页屏幕截图。 我保存了html2canvas。我的java项目的类路径中的js文件。我用来获取屏幕截图的java脚本代码是: 我能够捕获flipkart页面的全页屏幕截图,但其中没有任何图像。 我无法使用Chrome的TakeScreenshot实用程序,因为它不允许使用Chrome浏览器拍摄整页屏幕截图。

  • 我试图通过让每个手风琴项目在用户向下滚动页面时自动打开来增强JS手风琴的视觉效果。它们不需要自动关闭。 我使用的手风琴在“点击”时执行2个操作: 手风琴父'div'元素:类. is-open被应用 手风琴子'div'内容: a.)属性已删除aria-隐藏="true" 我如何实现强制这两个动作在滚动/可见而不是单击时启动? 我的JS知识有限。我不能任意编写JS,但可以理解和操作它。 半工作概念(基

  • 我想用MCP在Minecraft 1.18的屏幕上显示一个文本。我在YouTube上看过一些教程,但它们只介绍了如何在1.12版中使用,在网上搜索了大约4个小时后,我没有找到1.18版的任何内容。在1.12中,他们使用了

  • 我在JavaFX中使用场景图(不是画布)进行模拟,但在屏幕上只画我需要的东西时遇到了问题。 该模拟中有1000万个节点,但用户只需要在屏幕上同时看到这些节点的一小部分(最多160000个节点)。我关心的所有节点都是400x400<code>ImageViews 每个节点都是包含大约40000个节点的(节点块)的成员,因此每次需要显示4个或更少的节点块。为了显示这些“节点块”,它们被添加到静态中,该

  • 我正在开发这个Android应用程序,它应该为普通和大屏幕设备使用相同的布局。但是对于所有的屏幕尺寸落入xlarge括号中,我希望系统使用这个Android文档描述的屏幕兼容模式。 本文件明确指出: 默认情况下,当以下情况之一为真时,运行Android 3.2及更高版本的设备的屏幕兼容模式作为可选功能提供给用户: > < li> 您的应用程序已将android:minSdkVersion和andr