Tạo pdf từ HTML trong div bằng Javascript

231

Tôi có mã html sau:

<!DOCTYPE html>
<html>
    <body>
        <p>don't print this to pdf</p>
        <div id="pdf">
            <p><font size="3" color="red">print this to pdf</font></p>
        </div>
    </body>
</html>

Tất cả những gì tôi muốn làm là in ra pdf bất cứ thứ gì được tìm thấy trong div với id là "pdf". Điều này phải được thực hiện bằng cách sử dụng JavaScript. Tài liệu "pdf" sau đó sẽ được tự động tải xuống với tên tệp là "foobar.pdf"

Tôi đã sử dụng jspdf để làm điều này, nhưng chức năng duy nhất mà nó có là "văn bản" chỉ chấp nhận các giá trị chuỗi. Tôi muốn gửi HTML đến jspdf, không phải văn bản.

javascript jspdf

— John Crawford
nguồn

1

Như đã đề cập ở trên, tôi không muốn sử dụng chức năng "văn bản". Tôi muốn cung cấp cho nó HTML. Liên kết của bạn chỉ giao dịch với văn bản thuần túy chứ không phải html

— John Crawford

2

jsPDF không có fromHTMLchức năng; xem ví dụ "Trình kết xuất HTML" tại: mrrio.github.io/jsPDF

— mg1075

Hãy thử jsPDF hướng dẫn ở đây freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas

— Mã Spy

227

jsPDF có thể sử dụng plugin. Để cho phép nó in HTML, bạn phải bao gồm một số bổ trợ nhất định và do đó phải thực hiện các thao tác sau:

Truy cập https://github.com/MrRio/jsPDF và tải xuống Phiên bản mới nhất.
Bao gồm các tập lệnh sau trong dự án của bạn:
- jspdf.js
- jspdf.plugin.from_html.js
- jspdf.plugin.split bản_to_size.js
- jspdf.plugin.st Chuẩn_fonts_metrics.js

Nếu bạn muốn bỏ qua các thành phần nhất định, bạn phải đánh dấu chúng bằng ID, sau đó bạn có thể bỏ qua trong trình xử lý phần tử đặc biệt của jsPDF. Do đó, HTML của bạn sẽ trông như thế này:

<!DOCTYPE html>
<html>
  <body>
    <p id="ignorePDF">don't print this to pdf</p>
    <div>
      <p><font size="3" color="red">print this to pdf</font></p>
    </div>
  </body>
</html>

Sau đó, bạn sử dụng mã JavaScript sau để mở tệp PDF đã tạo trong PopUp:

var doc = new jsPDF();          
var elementHandler = {
  '#ignorePDF': function (element, renderer) {
    return true;
  }
};
var source = window.document.getElementsByTagName("body")[0];
doc.fromHTML(
    source,
    15,
    15,
    {
      'width': 180,'elementHandlers': elementHandler
    });

doc.output("dataurlnewwindow");

Đối với tôi, điều này đã tạo ra một bản PDF đẹp và gọn gàng chỉ bao gồm dòng 'in cái này thành pdf'.

Xin lưu ý rằng các trình xử lý phần tử đặc biệt chỉ xử lý ID trong phiên bản hiện tại, điều này cũng được nêu trong Vấn đề GitHub . Nó nói:

Bởi vì việc khớp được thực hiện đối với mọi phần tử trong cây nút, mong muốn của tôi là làm cho nó nhanh nhất có thể. Trong trường hợp đó, điều đó có nghĩa là "Chỉ các ID phần tử được khớp" Các ID phần tử vẫn được thực hiện theo kiểu jQuery "#id", nhưng điều đó không có nghĩa là tất cả các bộ chọn jQuery đều được hỗ trợ.

Do đó, việc thay thế '#ignorePDF' bằng các bộ chọn lớp như '.ignorePDF' không hiệu quả với tôi. Thay vào đó, bạn sẽ phải thêm cùng một trình xử lý cho từng phần tử mà bạn muốn bỏ qua như:

var elementHandler = {
  '#ignoreElement': function (element, renderer) {
    return true;
  },
  '#anotherIdToBeIgnored': function (element, renderer) {
    return true;
  }
};

Từ các ví dụ cũng có thể nói rằng có thể chọn các thẻ như 'a' hoặc 'li'. Đó có thể là một chút không hạn chế đối với hầu hết các giai đoạn:

Chúng tôi hỗ trợ xử lý yếu tố đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho ID hoặc tên nút. ("#iAmID", "div", "span", v.v.) Không có hỗ trợ cho bất kỳ loại bộ chọn (lớp, hợp chất) nào khác tại thời điểm này.

Một điều rất quan trọng để thêm là bạn mất tất cả thông tin về phong cách (CSS). May mắn thay jsPDF có thể định dạng độc đáo h1, h2, h3, v.v., đủ cho mục đích của tôi. Ngoài ra, nó sẽ chỉ in văn bản trong các nút văn bản, điều đó có nghĩa là nó sẽ không in các giá trị của textareas và tương tự. Thí dụ:

<body>
  <ul>
    <!-- This is printed as the element contains a textnode -->        
    <li>Print me!</li>
  </ul>
  <div>
    <!-- This is not printed because jsPDF doesn't deal with the value attribute -->
    <input type="textarea" value="Please print me, too!">
  </div>
</body>

— snrlx
nguồn

3

Tôi sẽ đoán trình xử lý phần tử có thể là một lớp? Điều đó sẽ phù hợp hơn về mặt ngữ nghĩa với các tiêu chuẩn HTML5. Một ID không chỉ mang quá nhiều trọng lượng đặc biệt trong CSS, nó còn phải là duy nhất.

— Bắt buộc

Không, theo như tôi biết, các lớp không có bộ chọn hợp lệ tại thời điểm như đã nêu trong các ví dụ của chúng: "chúng tôi hỗ trợ các trình xử lý phần tử đặc biệt. Đăng ký chúng với bộ chọn ID kiểu jQuery cho ID hoặc tên nút. (" #IAmID ", "div", "span", v.v.) Không có hỗ trợ cho bất kỳ loại bộ chọn (lớp, hợp chất) nào khác tại thời điểm này. ". Tuy nhiên, có thể sử dụng tên thẻ nếu điều đó phù hợp với trường hợp sử dụng của bạn và không ẩn các yếu tố quan trọng khác trên trang của bạn.

— snrlx

Trên trang của họ parall.ax/products/jspdf họ nói rằng họ hỗ trợ IE6 + thông qua một shim. Mặc dù vậy, tôi đã không thử nó.

— snrlx 6/03/2015

2

@snrlx Tôi nhận được pdf trống và lỗi này: renderer.pdf.sHashCode không phải là một chức năng

— Lisa Solomon

5

"Nếu bạn muốn bỏ qua các yếu tố nhất định, bạn phải đánh dấu chúng bằng ID" - một thư viện tuyệt vời, bị hủy hoại bởi sự mua lại đảo ngược đó. OP muốn in một bản duy nhất <div>, có thể là một trong hàng trăm - vì vậy anh ta phải đánh dấu tất cả các thành phần DOM không mong muốn ??

— Mawg nói rằng phục hồi Monica

53

Đây là giải pháp đơn giản. Điều này làm việc cho tôi. Bạn có thể sử dụng khái niệm in javascript và đơn giản lưu nó dưới dạng pdf.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $("#btnPrint").live("click", function () {
            var divContents = $("#dvContainer").html();
            var printWindow = window.open('', '', 'height=400,width=800');
            printWindow.document.write('<html><head><title>DIV Contents</title>');
            printWindow.document.write('</head><body >');
            printWindow.document.write(divContents);
            printWindow.document.write('</body></html>');
            printWindow.document.close();
            printWindow.print();
        });
    </script>
</head>
<body>
    <form id="form1">
    <div id="dvContainer">
        This content needs to be printed.
    </div>
    <input type="button" value="Print Div Contents" id="btnPrint" />
    </form>
</body>
</html>

— vaibhav kulkarni
nguồn

27

"Và đơn giản lưu cái này dưới dạng pdf" - Tôi đã bỏ lỡ phần đó. Bạn làm nó như thế nào?

— Mawg nói rằng phục hồi Monica

9

Điều này hiệu quả với tôi, để giải quyết vấn đề về kiểu dáng CSS, tôi đã tạo một tệp css khác có tên printPDF.css và thêm vào bằng cách sử dụng thẻ liên kết như thế này trong ví dụ trên: printWindow.document.write ('<html> <head> <title> Nội dung DIV </ title> '); printWindow.document.write ('<link rel = "biểu định kiểu" href = "../ css / printPDF.css" />'); printWindow.document.write ('</ head> <body>');

— Prime_Coder

2

Một số ý kiến: 1) Bạn không cần một bản định kiểu đặc biệt để in. Trong biểu định kiểu hiện tại của bạn, hãy làm một cái gì đó như: @media print {.pageBreak {page-break-before: always; } .labelPdf {font-weight: bold; cỡ chữ: 20px; } .noPrintPdf {display: none; }} và sử dụng các lớp này theo nhu cầu của bạn. 2) .live ("nhấp chuột", ...) không hoạt động với tôi, vì vậy tôi sử dụng .on ("nhấp chuột", ...) để thay thế.

— Davidson Lima

1

@DavidsonLima mã này tạo cửa sổ mới sẽ không thấy css cửa sổ cũ. Đó là lý do tại sao nó "bỏ qua" css, nó không bỏ qua, chỉ trong cửa sổ mới, nó không được tải. Chỉ cần tải nó trong đầu và nó sẽ được kết xuất.

— Lukas Liesis

1

Chỉ trong trường hợp bất kỳ ai đang cố gắng thực hiện điều này với Angular, vui lòng đặt tệp CSS của bạn vào thư mục tài sản.

— rgantla

16

Bạn có thể sử dụng autoPrint () và đặt đầu ra thành 'dataurlnewwindow' như thế này:

function printPDF() {
    var printDoc = new jsPDF();
    printDoc.fromHTML($('#pdf').get(0), 10, 10, {'width': 180});
    printDoc.autoPrint();
    printDoc.output("dataurlnewwindow"); // this opens a new popup,  after this the PDF opens the print window view but there are browser inconsistencies with how this is handled
}

— Marco
nguồn

1

Tôi tò mò, điều này đã từng làm việc cho ai khác ngoài OP chưa? Từ việc đọc mã, tôi dường như hiểu rằng nó sẽ chỉ hoạt động với các phần tử có ID. Có lẽ nó phức tạp hơn thế một chút, dù sao tôi cũng không biết làm thế nào để thực hiện công việc này.

— Michael

14

Từ những gì tôi quan sát, rất trớ trêu, từHTML chỉ hoạt động nếu phần tử được gửi dưới dạng tham số không chứa bất kỳ HTML nào: chỉ hỗ trợ văn bản thuần túy. Kinda giết chết mục đích của toàn bộ điều imo.

— Michael

Làm việc hoàn hảo cho tôi. Phần tử bạn muốn truyền vào không nhất thiết phải có ID. Đó chỉ là cách mà người sao chép tìm thấy nút mà anh ta muốn vượt qua. Ngoài ra, giải pháp này cũng hoạt động mà không có 'printDoc.autoPrint ()'. Nếu bạn muốn để lại dòng cụ thể này trong mã, thì bạn bắt buộc phải bao gồm AutoPrint-Plugin.

— snrlx

13

Nếu bạn cần tải xuống bản pdf của một trang cụ thể, chỉ cần thêm nút như thế này

<h4 onclick="window.print();"> Print </h4>

sử dụng window.print () để in tất cả các trang của bạn không chỉ là div

— Wael Mahmoud
nguồn

2

Chỉ là một bổ sung đơn giản cho nó, nếu bạn muốn tạo pdf có thể tải xuống của iframe, thì hãy sử dụng bảng điều khiển dành cho nhà phát triển: document.querySelector("#myIframe").contentWindow.print()

— ioCron

11

Như đã đề cập, bạn nên sử dụng jsPDF và html2canvas . Tôi cũng đã tìm thấy một chức năng bên trong các vấn đề của jsPDF, nó tự động chia pdf của bạn thành nhiều trang ( nguồn )

function makePDF() {

    var quotes = document.getElementById('container-fluid');

    html2canvas(quotes, {
        onrendered: function(canvas) {

        //! MAKE YOUR PDF
        var pdf = new jsPDF('p', 'pt', 'letter');

        for (var i = 0; i <= quotes.clientHeight/980; i++) {
            //! This is all just html2canvas stuff
            var srcImg  = canvas;
            var sX      = 0;
            var sY      = 980*i; // start 980 pixels down for every new page
            var sWidth  = 900;
            var sHeight = 980;
            var dX      = 0;
            var dY      = 0;
            var dWidth  = 900;
            var dHeight = 980;

            window.onePageCanvas = document.createElement("canvas");
            onePageCanvas.setAttribute('width', 900);
            onePageCanvas.setAttribute('height', 980);
            var ctx = onePageCanvas.getContext('2d');
            // details on this usage of this function: 
            // https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Using_images#Slicing
            ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight);

            // document.body.appendChild(canvas);
            var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0);

            var width         = onePageCanvas.width;
            var height        = onePageCanvas.clientHeight;

            //! If we're on anything other than the first page,
            // add another page
            if (i > 0) {
                pdf.addPage(612, 791); //8.5" x 11" in pts (in*72)
            }
            //! now we declare that we're working on that page
            pdf.setPage(i+1);
            //! now we add content to that page!
            pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62));

        }
        //! after the for loop is finished running, we save the pdf.
        pdf.save('test.pdf');
    }
  });
}

— Rửa tội
nguồn

3

nó không chuyển đổi hình ảnh

— Probosckie

1

cảm ơn vì câu trả lời, bạn có thể đưa ra bất kỳ gợi ý nào về cách đặt nó ở định dạng trang A4 không?

— johannesMatevosyan

3

Điều này không thực sự tạo ra một vector pdf tốt, nó tạo ra rất nhiều ảnh bitmap với canvas và xếp chúng thành hình ảnh. Kết quả có nhiều nhược điểm - lớn, chất lượng thấp, không thể sao chép và dán từ PDF, v.v ...

— Roman Zenka

6

Một cách là sử dụng hàm window.print (). Mà không cần bất kỳ thư viện

Ưu

1.Không cần thư viện bên ngoài.

2. Chúng tôi chỉ có thể in các phần được chọn của cơ thể.

3.Không có xung đột css và các vấn đề js.

4.Core chức năng html / js

--- Đơn giản chỉ cần thêm mã dưới đây

CSS để

@media print {
        body * {
            visibility: hidden; // part to hide at the time of print
            -webkit-print-color-adjust: exact !important; // not necessary use         
               if colors not visible
        }

        #printBtn {
            visibility: hidden !important; // To hide 
        }

        #page-wrapper * {
            visibility: visible; // Print only required part
            text-align: left;
            -webkit-print-color-adjust: exact !important;
        }
    }

Mã JS - Gọi hàm bewlow khi nhấp vào btn

$scope.printWindow = function () {
  window.print()
}

Lưu ý: Sử dụng! Quan trọng trong mọi đối tượng css

Thí dụ -

.legend  {
  background: #9DD2E2 !important;
}

— Rohit Parte
nguồn

Có vấn đề với chức năng In của trình duyệt. Người dùng thường có các tùy chọn mặc định được chọn cho chế độ xem In (lề, kích thước trang và hơn thế nữa). Do đó, rất khó để tạo ra PDF yêu cầu với kiểu dáng được yêu cầu mà không cần đào tạo người dùng, điều này khó hơn và gần như không thể ...

— Rahmat Ali

4

tôi sử dụng jspdf và html2canvas để kết xuất css và tôi xuất nội dung của div cụ thể vì đây là mã của tôi

$(document).ready(function () {
    let btn=$('#c-oreder-preview');
    btn.text('download');
    btn.on('click',()=> {

        $('#c-invoice').modal('show');
        setTimeout(function () {
            html2canvas(document.querySelector("#c-print")).then(canvas => {
                //$("#previewBeforeDownload").html(canvas);
                var imgData = canvas.toDataURL("image/jpeg",1);
                var pdf = new jsPDF("p", "mm", "a4");
                var pageWidth = pdf.internal.pageSize.getWidth();
                var pageHeight = pdf.internal.pageSize.getHeight();
                var imageWidth = canvas.width;
                var imageHeight = canvas.height;

                var ratio = imageWidth/imageHeight >= pageWidth/pageHeight ? pageWidth/imageWidth : pageHeight/imageHeight;
                //pdf = new jsPDF(this.state.orientation, undefined, format);
                pdf.addImage(imgData, 'JPEG', 0, 0, imageWidth * ratio, imageHeight * ratio);
                pdf.save("invoice.pdf");
                //$("#previewBeforeDownload").hide();
                $('#c-invoice').modal('hide');
            });
        },500);

        });
});

— ghazaleh javaheri
nguồn

Điều này hoạt động nhưng nó chuyển đổi nội dung thành hình ảnh

— Samad

Ngoài ra, làm thế nào để đặt ngắt trang để nội dung / hình ảnh sẽ in trên trang mới nếu nó không phù hợp trên trang hiện tại?

— SHEKHAR CHIA SẺ

4

Không thiếu sót, JS thuần túy
Để thêm CSS hoặc hình ảnh - không sử dụng URL tương đối, hãy sử dụng URL đầy đủ http://...domain.../path.csshoặc hơn. Nó tạo tài liệu HTML riêng biệt và nó không có ngữ cảnh của điều chính.
bạn cũng có thể nhúng hình ảnh như base64

Điều này phục vụ tôi trong nhiều năm nay:

export default function printDiv({divId, title}) {
  let mywindow = window.open('', 'PRINT', 'height=650,width=900,top=100,left=150');

  mywindow.document.write(`<html><head><title>${title}</title>`);
  mywindow.document.write('</head><body >');
  mywindow.document.write(document.getElementById(divId).innerHTML);
  mywindow.document.write('</body></html>');

  mywindow.document.close(); // necessary for IE >= 10
  mywindow.focus(); // necessary for IE >= 10*/

  mywindow.print();
  mywindow.close();

  return true;
}

— Lukas Liesis
nguồn

1

Vấn đề với điều này là pdf sẽ không có bất kỳ hiệu ứng css nào trong đó.

— Shadab Faiz

@ShadabFaiz Nó sẽ nhưng nó có thể không giống như cửa sổ chính. Bạn vẫn có thể thêm tùy chỉnh css tho html này.

— Lukas Liesis

Vâng. Iagree với bạn có thể thêm css trong cửa sổ nhưng làm thế nào để in kết quả trong tệp pdf?

— Mirko Cianfarani

1

Không hiển thị hình ảnh, mặc dù.

— Tháng 1

1

Tôi thích điều này! Một số điều chỉnh ở đây và ở đó và nó có vẻ tốt. Và một điều nhỏ không loại bỏ khoảng cách thêm vào <body >nó cần điều này: P

— Phil Roggenbuck

2

Nếu bạn muốn xuất bảng, bạn có thể xem mẫu xuất này được cung cấp bởi tiện ích Shield UI Grid.

Nó được thực hiện bằng cách mở rộng cấu hình như thế này:

...
exportOptions: {
    proxy: "/filesaver/save",
    pdf: {
        fileName: "shieldui-export",
        author: "John Smith",
        dataSource: {
            data: gridData
        },
        readDataSource: true,
        header: {
            cells: [
                { field: "id", title: "ID", width: 50 },
                { field: "name", title: "Person Name", width: 100 },
                { field: "company", title: "Company Name", width: 100 },
                { field: "email", title: "Email Address" }
            ]
        }
    }
}
...

— Vladimir Georgiev
nguồn

Chức năng "Xuất ra PDF" dẫn đến một tài liệu PDF trống.

— Richard Nalezynski

Có thể cấu hình sai về phía bạn ... Nếu bạn muốn, hãy đặt câu hỏi với thẻ Shieldui

— Vladimir Georgiev

2

Sử dụng pdfMake.js và Gist này .

(Tôi đã tìm thấy Gist ở đây cùng với một liên kết đến gói html-to-pdfmake mà hiện tại tôi không sử dụng.)

Sau npm install pdfmakevà lưu Gist trong htmlToPdf.jstôi sử dụng nó như thế này:

const pdfMakeX = require('pdfmake/build/pdfmake.js');
const pdfFontsX = require('pdfmake-unicode/dist/pdfmake-unicode.js');
pdfMakeX.vfs = pdfFontsX.pdfMake.vfs;
import * as pdfMake from 'pdfmake/build/pdfmake';
import htmlToPdf from './htmlToPdf.js';

var docDef = htmlToPdf(`<b>Sample</b>`);
pdfMake.createPdf({content:docDef}).download('sample.pdf');

Nhận xét:

Trường hợp sử dụng của tôi là tạo ra html có liên quan từ một tài liệu markdown (với markdown-nó ) và sau đó tạo ra pdf, và tải lên nội dung nhị phân của nó (mà tôi có thể nhận được với pdfMake's getBuffer()chức năng), tất cả từ trình duyệt. Pdf được tạo ra hóa ra đẹp hơn cho loại html này so với các giải pháp khác mà tôi đã thử.
Tôi không hài lòng với kết quả mà tôi nhận được từ jsPDF.fromHTML()đề xuất trong câu trả lời được chấp nhận, vì giải pháp đó dễ bị nhầm lẫn bởi các ký tự đặc biệt trong HTML của tôi mà dường như được hiểu là một loại đánh dấu và hoàn toàn làm hỏng PDF kết quả.
Sử dụng các giải pháp dựa trên canvas (như jsPDF.from_html()hàm không dùng nữa , không bị nhầm lẫn với câu trả lời được chấp nhận) không phải là một lựa chọn cho tôi vì tôi muốn văn bản trong tệp PDF được tạo có thể dán được, trong khi các giải pháp dựa trên canvas tạo ra các tệp PDF dựa trên bitmap.
Đánh dấu trực tiếp sang các trình chuyển đổi pdf như md-to-pdf chỉ là phía máy chủ và sẽ không hoạt động đối với tôi.
Sử dụng chức năng in của trình duyệt sẽ không hoạt động đối với tôi vì tôi không muốn hiển thị tệp PDF được tạo mà tải lên nội dung nhị phân của nó.

— ilmiacs
nguồn

Nếu tôi đọc mã chính xác, điều này không hỗ trợ các kiểu viền CSS (ví dụ trên bảng), đúng không?

— ninjagecko

1

Tôi đã có thể nhận được jsPDF để in các bảng được tạo động từ div.

$(document).ready(function() {

        $("#pdfDiv").click(function() {

    var pdf = new jsPDF('p','pt','letter');
    var specialElementHandlers = {
    '#rentalListCan': function (element, renderer) {
        return true;
        }
    };

    pdf.addHTML($('#rentalListCan').first(), function() {
        pdf.save("caravan.pdf");
    });
    });
});

Hoạt động tuyệt vời với Chrome và Firefox ... tất cả định dạng đều được phát hành trong IE.

Tôi cũng bao gồm những điều này:

<script src="js/jspdf.js"></script>
    <script src="js/jspdf.plugin.from_html.js"></script>
    <script src="js/jspdf.plugin.addhtml.js"></script>
    <script src="//mrrio.github.io/jsPDF/dist/jspdf.debug.js"></script>
    <script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script>
    <script type="text/javascript" src="./libs/FileSaver.js/FileSaver.js"></script>
    <script type="text/javascript" src="./libs/Blob.js/Blob.js"></script>
    <script type="text/javascript" src="./libs/deflate.js"></script>
    <script type="text/javascript" src="./libs/adler32cs.js/adler32cs.js"></script>

    <script type="text/javascript" src="js/jspdf.plugin.addimage.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.sillysvgrenderer.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.split_text_to_size.js"></script>
    <script type="text/javascript" src="js/jspdf.plugin.standard_fonts_metrics.js"></script>

— Wasskinny
nguồn

2

Bạn có thể xin vui lòng gửi ví dụ về cách bạn vượt qua html

— Erum

nhưng mã của bạn là <script src = " html2canvas.hertzen.com/build/html2canvas.js"></ trộm > có nghĩa là nó cần internet?

— Erum

1

@Erum bạn có thể tải xuống Tệp.

— Eduardo Cuomo

0

Để chụp div dưới dạng PDF, bạn có thể sử dụng giải pháp https://grabz.it . Nó có API JavaScript dễ dàng và linh hoạt và sẽ cho phép bạn nắm bắt nội dung của một phần tử HTML duy nhất như div hoặc span

Để triển khai nó, trước tiên bạn cần lấy khóa ứng dụng và bí mật và tải xuống SDK (miễn phí).

Và bây giờ là một ví dụ.

Giả sử bạn có HTML:

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

Để nắm bắt những gì nằm dưới id tính năng, bạn sẽ cần:

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

Xin lưu ý target: #feature. #featurelà bạn chọn CSS, giống như trong ví dụ trước. Bây giờ, khi trang được tải, ảnh chụp màn hình bây giờ sẽ được tạo ở cùng vị trí với thẻ script, nó sẽ chứa tất cả nội dung của các tính năng div và không có gì khác.

Các cấu hình và tùy chỉnh khác mà bạn có thể làm với cơ chế chụp màn hình div, vui lòng kiểm tra chúng ở đây

— Johnny
nguồn