个人中心
gpt4 book ai didi

javascript - 如何在从 HTML 生成的 pdf 中添加标题

转载 作者：行者123 更新时间：2023-11-30 08:01:00 26 4
gpt4 key购买 nike

我正在研究 codeigniter。我想将保存到 pdf 功能添加到其中一个 div。我正在使用 html2canvas 打印它。我的问题是我想在 pdf 的标题处添加 Logo 和其他一些信息，这在网页上是不可见的。我不知道该怎么做。下面是我的代码。

    <script type='text/javascript' src="<?php echo site_url('assets/js/html2canvas.js'); ?>"></script>
    <script type='text/javascript' src="<?php echo site_url('assets/js/jspdf.debug.js'); ?>"></script>

    <script type='text/javascript'>//<![CDATA[ 
    function demoFromHTML() {
         var pdf = new jsPDF('p', 'pt', 'letter');
         pdf.addHTML($('#content')[0], function () {
         pdf.save('test.pdf');
         });

        specialElementHandlers = {
            '#bypassme': function (element, renderer) {
                return true
            }
        };
        margins = {
            top: 30,
            bottom: 30,
            left: 30,
            width: '100%'
            //color: '#000'
        };

        pdf.addHTML()(
        source, // HTML string or DOM elem ref.
        margins.left, // x coord
        margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
        },

        function (dispose) {
            pdf.save('test.pdf');
        }, margins);
    }
    </script>

<div id="content">
Save this to PDF
</div>

请帮忙。

最佳答案

在调用 addHTML 之前，您可以将图像或文本添加到您的 jsPDF 对象:

var pdf = new jsPDF('p','pt','a4');

var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAXwBfAAD/2wBDAAoHBwkHBgoJCAkLCwoMDxkQDw4ODx4WFxIZJCAmJSMgIyIoLTkwKCo2KyIjMkQyNjs9QEBAJjBGS0U+Sjk/QD3/2wBDAQsLCw8NDx0QEB09KSMpPT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT3/wgARCAAaABQDAREAAhEBAxEB/8QAGQAAAgMBAAAAAAAAAAAAAAAABQYAAwQB/8QAGAEBAQEBAQAAAAAAAAAAAAAAAwEAAgT/2gAMAwEAAhADEAAAAXKbOK1c92KOHzuQcxaHNjdidpy5yl//xAAfEAACAQMFAQAAAAAAAAAAAAABAgADEhMEEBEhIjH/2gAIAQEAAQUC+QuVq6duEqnoephWKDia/FLjLjt//8QAHREAAgIBBQAAAAAAAAAAAAAAAAIBEQMSEyAiMf/aAAgBAwEBPwEhIZLj2DOttcCkNp7G8xZfH//EAB4RAAIDAAEFAAAAAAAAAAAAAAABAgMREiAhIjFR/9oACAECAQE/AR2ONmS9MolkcZZ8aHDl4b2FTEaEun//xAAhEAABAwMEAwAAAAAAAAAAAAABAAIRAxAxEjJBQiFhYv/aAAgBAQAGPwJQ7acIg8FQWFzfS0B0t+shcpkNqHx1KqahU29rZKybf//EAB0QAQADAQACAwAAAAAAAAAAAAEAESExQVFhgZH/2gAIAQEAAT8hUFrUE1U6+ZZvXITcrvpNdp4xEO+l1b7Gv7BQdYMALdXDkpwD7ipT+kOT/9oADAMBAAIAAwAAABBnmCSOz//EABsRAQACAwEBAAAAAAAAAAAAAAEAESExYSBx/9oACAEDAQE/EAXUQdz5KIsIMuNjTLWFPNMVwaOQoRsVXn//xAAcEQEAAgIDAQAAAAAAAAAAAAABABEhMSBhcVH/2gAIAQIBAT8QUMsIdQ9/JZNpSUTIImK3bZ5AbtfZa3cpbvj/AP/EABwQAQACAwEBAQAAAAAAAAAAAAEAESExQXFRwf/aAAgBAQABPxCsIatahd4Y+dDAb93fjD4HtO4qLlXU0ej2pdETsO11xEdV8cP2hExkSA2d3NHkA0Q0CIxSEyKmjyf/2Q==';
pdf.addImage(imgData, 'JPEG', 20, 20, 20, 26);

pdf.text(50, 40, "Header");

pdf.addHTML(document.body,40,100,function() {
    pdf.save('web.pdf');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

<body>
    <p id="to-pdf">HTML content...</p>
</body>

图像必须使用 base64 编码。您可以为此使用此工具:http://dataurl.net/#dataurlmaker

关于javascript - 如何在从 HTML 生成的 pdf 中添加标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28454050/

26 4 0
文章推荐： java - Jsoup 中 umlaute 的编码具有奇怪的行为
文章推荐： javascript - 模型未在谷歌地图监听器中更新 - angularjs
文章推荐： java - Gradle - 多项目 - 平面目录结构均位于同一级别
文章推荐： javascript - 在 jquery 中检测对 textarea 的自动更改？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com