首页 > 其他分享 >页面转为pdf并下载

页面转为pdf并下载

时间:2024-02-05 15:55:43浏览次数:31  
标签:canvas 导出 leftHeight var pdf 转为 页面

<!DOCTYPE>
<html>

<head>
    <title>
        html2canvas
    </title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
            background-color: white;
        }
    </style>
</head>

<body>
    <div>
        <button id="renderPdf">导出</button>
        <div>
            <!-- <img src="./img/img.png" alt=""> -->
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
            页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>页面导出<br>
        </div>
    </div>
    <script type="text/javascript" src="./js/html2canvas.js"></script>
    <script type="text/javascript" src="./js/jsPdf.debug.js"></script>
    <script type="text/javascript">

        var downPdf = document.getElementById("renderPdf");

        downPdf.onclick = function () {
            html2canvas(document.body, {
                onrendered: function (canvas) {

                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = contentWidth / 595.28 * 841.89;
                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;
                    //pdf页面偏移
                    var position = 0;
                    //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 555.28;
                    var imgHeight = 555.28 / contentWidth * contentHeight;

                    var pageData = canvas.toDataURL('image/jpeg', 1.0);

                    var pdf = new jsPDF('', 'pt', 'a4');
                    //有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
                    //当内容未超过pdf一页显示的范围,无需分页
                    if (leftHeight < pageHeight) {
                        pdf.addImage(pageData, 'JPEG', 20, 0, imgWidth, imgHeight);
                    } else {
                        while (leftHeight > 0) {
                            pdf.addImage(pageData, 'JPEG', 20, position, imgWidth, imgHeight)
                            leftHeight -= pageHeight;
                            position -= 841.89;
                            //避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }

                    pdf.save('content.pdf');
                }
            })
        }
    </script>
</body>

</html>

  

html2canvas
jsPdf.debug

标签:canvas,导出,leftHeight,var,pdf,转为,页面
From: https://www.cnblogs.com/xiaojianwei/p/18008310

相关文章

  • 推荐一款好用的PDF转换工具,可以拆分、合并,亲测好用!!!
    推荐一款好用的PDF转换工具,可以拆分、合并,等等操作,亲测好用。PS.因为经常会遇到PDF的拆分需要,以前在网上的都是免费的,后来的也都变成付费的无水印的了,再然后就变成全都要收费了。尴尬的是,现在这种必须收费的情况下,有些网站的这个工具居然不好用,搞了半天还充费了,最后还不好用,再......
  • 前端监听页面是否鼠标移动 超过一定的静止时间自动跳转到登录页面
    import{CreateBuriedPoints}from'@/api/Statistics';exportconstDurationStay={data(){return{currentTime:"",DurationOfStay:5*60*1000,//自定义的无操作时长5分钟intervalTime:0}},mou......
  • 利用Python进行数据分析 pdf下载
    本书由Pythonpandas项目创始人WesMcKinney亲笔撰写,详细介绍利用Python进行操作、处理、清洗和规整数据等方面的具体细节和基本要点。第2版针对Python3.6进行全面修订和更新,涵盖新版的pandas、NumPy、IPython和Jupyter,并增加大量实际案例,可以帮助你高效解决一系列数据分析问题。......
  • PDF 补丁丁 1.0.1 版更新
    这是一个维护性的更新。主要是修复软件存在的问题,内容如下所示。新增功能提取图片功能增加仅提取页面可见图片的选项。修改功能恢复了在各功能输入文件框中自动填入文件名的行为。导出信息文件时,为字体文件取更具体的名称。提取图片功能默认剔除重复图片和隐藏图片。在读......
  • 【专题】2023年碳市场、净零碳、双碳行业报告汇总PDF合集分享(附原数据表)
    原文链接: https://tecdat.cn/?p=35142原文出处:拓端数据部落公众号中国碳金融创新发展是一个备受关注的话题。本白皮书报告合集综合了中国特色与国际经验、理论研究与前沿实践、监管导向与市场声音,全面探讨了金融力量在中国碳市场发展中的角色与作用。阅读原文,获取专题报告合集......
  • 《UNIX网络编程 卷2:进程间通信(第2版)》PDF
    内容简介《UNIX网络编程.卷2:进程间通信(第2版)》是一部UNIX网络编程的经典之作!进程间通信(IPC)几乎是所有Unix程序性能的关键,理解IPC也是理解如何开发不同主机间网络应用程序的必要条件。《UNIX网络编程.卷2:进程间通信(第2版)》从对PosixIPC和SystemVIPC的内部结构开始讨论,全面......
  • 软件测试学习笔记丨Seleium的BUG:页面元素文案重复空格处理
    前言需求做WEB的UI自动化练习,其需求为:访问慕课网的实战页面,获取实战页面的课程列表信息,并逐个点击进入详情并且关闭详情,直到最后一个。环境Java8MavenSelenium4.0Junit5初步代码importorg.junit.jupiter.api.AfterAll;importorg.junit.jupiter.api.BeforeAll;importorg......
  • setTimeout定时,但是退出页面还执行,如何解决
    setTimeout定时,但是退出页面还执行,如何解决定时器的使用需记得清清除使用对象变量赋值执行在处理setTimeout定时器时,如果用户在定时器触发之前离开页面,你可以使用clearTimeout方法来清除定时器,以确保定时器不会在页面关闭后继续执行。以下是一个示例,展示如何使用clearTime......
  • C# 将 HTML 转换为图片或 PDF
    原文链接:https://blog.csdn.net/slowlifes/article/details/72940116/首先是把HTML转换为图片。publicpartialclassForm1:Form{publicForm1(){InitializeComponent();}WebBrowserwebBrowser=null;......
  • 如何出一份前端页面的性能分析报告?
    编写一份前端页面性能分析报告,需要按照一定结构和步骤来详细记录测试过程、数据收集、问题识别与优化建议。以下是一个基本的模板框架:一、前言目的:简述报告的目的,比如评估特定网页在不同环境下的加载速度、渲染效率及用户体验。范围:明确分析涉及的页面及其版本信息,以及使用的......