Hasilkan pdf dari HTML dalam div menggunakan Javascript

232

Saya memiliki kode html berikut:

<!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>

Yang ingin saya lakukan adalah mencetak ke pdf apa pun yang ditemukan di div dengan id "pdf". Ini harus dilakukan menggunakan JavaScript. Dokumen "pdf" kemudian harus diunduh secara otomatis dengan nama file "foobar.pdf"

Saya telah menggunakan jspdf untuk melakukan ini, tetapi satu-satunya fungsi yang dimilikinya adalah "teks" yang hanya menerima nilai string. Saya ingin mengirim HTML ke jspdf, bukan teks.

javascript jspdf John Crawford
sumber
1
Seperti disebutkan di atas saya tidak ingin menggunakan fungsi "teks". Saya ingin memberikannya HTML. Tautan Anda hanya berurusan dengan teks biasa dan bukan html
John Crawford
2
jsPDF memang memiliki fromHTMLfungsi; lihat contoh "HTML Renderer" di: mrrio.github.io/jsPDF
mg1075
Coba tutorial jsPDF di sini freakyjolly.com/create-multipage-html-pdf-jspdf-html2canvas
Code Spy

Jawaban:

228

jsPDF dapat menggunakan plugin. Untuk mengaktifkannya untuk mencetak HTML, Anda harus menyertakan plugin tertentu dan karenanya harus melakukan hal berikut:

  1. Buka https://github.com/MrRio/jsPDF dan unduh Versi terbaru.
  2. Sertakan Script berikut dalam proyek Anda:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

Jika Anda ingin mengabaikan elemen tertentu, Anda harus menandainya dengan ID, yang kemudian bisa Anda abaikan dalam penangan elemen khusus jsPDF. Karenanya HTML Anda akan terlihat seperti ini:

<!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>

Kemudian Anda menggunakan kode JavaScript berikut untuk membuka PDF yang dibuat dalam 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");

Bagi saya ini menciptakan PDF yang bagus dan rapi yang hanya menyertakan baris 'print this to pdf'.

Harap dicatat bahwa penangan elemen khusus hanya berurusan dengan ID di versi saat ini, yang juga dinyatakan dalam Masalah GitHub . Ini menyatakan:

Karena pencocokan dilakukan terhadap setiap elemen di pohon simpul, keinginan saya adalah membuatnya secepat mungkin. Dalam hal ini, itu berarti "Hanya ID elemen yang cocok" ID elemen masih dilakukan dalam gaya jQuery "#id", tetapi itu tidak berarti bahwa semua pemilih jQuery didukung.

Oleh karena itu mengganti '#ignorePDF' dengan pemilih kelas seperti '.ignorePDF' tidak berfungsi untuk saya. Sebaliknya Anda harus menambahkan handler yang sama untuk setiap elemen, yang ingin Anda abaikan seperti:

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

Dari contoh - contoh itu juga dinyatakan bahwa mungkin untuk memilih tag seperti 'a' atau 'li'. Itu mungkin sedikit tidak membatasi untuk sebagian besar usecases:

Kami mendukung penangan elemen khusus. Daftarkan mereka dengan pemilih ID gaya jQuery untuk ID atau nama simpul. ("#iAmID", "div", "span" dll.) Tidak ada dukungan untuk jenis penyeleksi lainnya (kelas, senyawa) pada saat ini.

Satu hal yang sangat penting untuk ditambahkan adalah Anda kehilangan semua informasi gaya (CSS) Anda. Untungnya, jsPDF dapat memformat h1, h2, h3 dll., Yang cukup untuk keperluan saya. Selain itu hanya akan mencetak teks dalam node teks, yang berarti tidak akan mencetak nilai textareas dan sejenisnya. Contoh:

<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
sumber
3
Saya akan menebak element handler bisa menjadi kelas? Itu akan jauh lebih semantik sejalan dengan standar HTML5. ID tidak hanya membawa terlalu banyak bobot pada CSS, tetapi juga harus unik.
Imperatif
Tidak, sejauh yang saya tahu, kelas bukanlah penyeleksi yang valid saat ini sebagaimana dinyatakan dalam contoh mereka: "kami mendukung penangan elemen khusus. Daftarkan mereka dengan pemilih ID gaya jQuery untuk ID atau nama simpul. (" #IAmID ", "div", "span" dll.) Tidak ada dukungan untuk penyeleksi tipe lain (kelas, majemuk) saat ini. " Namun, masih dimungkinkan untuk menggunakan nama tag jika itu sesuai dengan use case Anda dan tidak menyembunyikan elemen penting lainnya di halaman Anda.
snrlx
Di halaman mereka parall.ax/products/jspdf mereka menyatakan bahwa mereka mendukung IE6 + melalui shim. Belum mencobanya sendiri.
snrlx
2
@snrlx Saya mendapatkan pdf kosong dan kesalahan ini: renderer.pdf.sHashCode bukan fungsi
Lisa Solomon
5
"Jika Anda ingin mengabaikan elemen-elemen tertentu, Anda harus menandainya dengan ID" - perpustakaan yang indah, hancur oleh permintaan yang terbalik. OP ingin mencetak satu <div>, yang bisa menjadi salah satu dari ratusan - jadi dia harus menandai semua elemen DOM yang tidak diinginkan ??
Mawg mengatakan mengembalikan Monica
53

Ini adalah solusi sederhana. Ini berfungsi untuk saya. Anda dapat menggunakan konsep cetak javascript dan sederhana menyimpan ini sebagai 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
sumber
27
"dan sederhana simpan ini sebagai pdf" - Saya melewatkan bagian itu. Bagaimana Anda melakukannya?
Mawg mengatakan mengembalikan Monica
9
Ini bekerja untuk saya, untuk memecahkan masalah styling CSS, saya membuat file css lain yang disebut printPDF.css dan menambahkan menggunakan tag tautan seperti ini dalam contoh di atas: printWindow.document.write ('<html> <head> <title> Konten DIV </title> '); printWindow.document.write ('<link rel = "stylesheet" href = "../ css / printPDF.css" />'); printWindow.document.write ('</head> <body>');
Prime_Coder
2
Beberapa komentar: 1) Anda tidak memerlukan lembar gaya khusus untuk mencetak. Di stylesheet Anda saat ini, lakukan sesuatu seperti: @ media print {.pageBreak {page-break-before: always; } .labelPdf {font-weight: bold; ukuran font: 20px; } .noPrintPdf {display: none; }} dan gunakan kelas-kelas ini sebagai kebutuhan Anda. 2) .live ("klik", ...) tidak berfungsi untuk saya, jadi saya menggunakan .on ("klik", ...) sebagai gantinya.
Davidson Lima
1
@ Davidvidima Kode ini menciptakan jendela baru yang tidak akan melihat jendela css lama. Itu sebabnya "mengabaikan" css, tidak mengabaikan, hanya di jendela baru itu tidak dimuat. Hanya memuatnya di kepala dan itu akan rendering.
Lukas Liesis
1
Kalau-kalau ada orang yang mencoba mewujudkan ini dengan Angular, harap letakkan file CSS Anda di folder aset.
rgantla
16

Anda dapat menggunakan autoPrint () dan mengatur output ke 'dataurlnewwindow' seperti ini:

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
sumber
1
Saya ingin tahu, apakah ini pernah bekerja untuk orang lain selain OP? Dari membaca kode, saya tampaknya mengerti bahwa itu hanya akan berfungsi dengan elemen yang memiliki ID. Ini mungkin sedikit lebih rumit dari itu, bagaimanapun saya tidak tahu bagaimana membuat ini bekerja.
Michael
14
Dari apa yang saya amati, sangat ironis, dariHTML hanya berfungsi jika elemen yang dikirim sebagai parameter tidak mengandung HTML apa pun: hanya teks biasa yang didukung. Agak membunuh semua tujuan imo.
Michael
Bekerja dengan sempurna untuk saya. Elemen yang ingin Anda sampaikan tidak perlu harus memiliki ID. Itulah cara replika menemukan simpul yang ingin dilewatinya. Selain itu solusi ini juga berfungsi tanpa 'printDoc.autoPrint ()'. Jika Anda ingin meninggalkan baris khusus ini dalam kode, maka Anda harus menyertakan autoPrint-Plugin.
snrlx
13

jika Anda perlu mengunduh pdf dari halaman tertentu cukup tambahkan tombol seperti ini

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

gunakan window.print () untuk mencetak semua halaman Anda, bukan hanya div

Wael Mahmoud
sumber
2
Hanya tambahan sederhana untuk itu, jika Anda ingin membuat pdf iframe yang dapat diunduh, maka gunakan konsol pengembang: document.querySelector("#myIframe").contentWindow.print()
ioCron
11

Seperti disebutkan, Anda harus menggunakan jsPDF dan html2canvas . Saya juga menemukan fungsi di dalam masalah jsPDF yang membagi secara otomatis pdf Anda menjadi beberapa halaman ( sumber )

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');
    }
  });
}
BaptWaels
sumber
3
itu tidak mengonversi gambar
Probosckie
1
terima kasih atas jawabannya, dapatkah Anda memberikan petunjuk tentang cara memasukkannya ke format halaman A4?
johannesMatevosyan
3
Ini tidak benar-benar membuat pdf vektor yang baik, itu membuat banyak bitmap dengan kanvas, dan menumpuknya sebagai gambar. Hasilnya memiliki banyak kelemahan - besar, kualitas rendah, tidak dapat menyalin & menempel dari PDF, dll ...
Roman Zenka
6

Salah satu caranya adalah dengan menggunakan fungsi window.print (). Yang tidak memerlukan perpustakaan apa pun

Pro

1.Tidak perlu perpustakaan eksternal.

2. Kita dapat mencetak hanya bagian tubuh yang dipilih juga.

3.Tidak ada konflik css dan masalah js.

4.Core fungsi html / js

--- Cukup tambahkan kode di bawah ini

CSS untuk

@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;
        }
    }

Kode JS - Memanggil fungsi bewlow pada klik btn

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

Catatan: Gunakan! Penting di setiap objek css

Contoh - 

.legend  {
  background: #9DD2E2 !important;
}
Rohit Parte
sumber
Ada masalah dengan fungsi Print pada browser. Pengguna biasanya memiliki opsi default yang dipilih untuk tampilan Cetak (margin, ukuran halaman, dan lainnya). Oleh karena itu, sangat sulit untuk menghasilkan PDF yang diperlukan dengan gaya yang diperlukan tanpa melatih pengguna, yang mana jauh lebih sulit dan hampir tidak mungkin ...
Rahmat Ali
4

saya menggunakan jspdf dan html2canvas untuk rendering css dan saya mengekspor konten div tertentu karena ini adalah kode saya

$(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
sumber
ini berfungsi tetapi itu mengubah konten menjadi gambar
Samad
Juga, bagaimana cara mengatur page break sehingga konten / gambar akan dicetak pada halaman baru jika tidak sesuai dengan halaman saat ini?
SHEKHAR SHETE
4
  • Tidak ada ketergantungan, JS murni
  • Untuk menambahkan CSS atau gambar - jangan gunakan URL relatif, gunakan URL lengkap http://...domain.../path.cssatau lebih. Itu membuat dokumen HTML terpisah dan tidak memiliki konteks hal utama.
  • Anda juga dapat menanamkan gambar sebagai base64

Ini melayani saya selama bertahun-tahun sekarang:

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
sumber
1
Masalahnya dengan ini adalah pdf tidak akan memiliki efek css di dalamnya.
Shadab Faiz
@ ShadabFaiz Akan tetapi mungkin tidak sama dengan jendela utama. Anda masih dapat menambahkan custom css ke html ini juga.
Lukas Liesis
Ya. Saya setuju dengan Anda dapat menambahkan css di jendela tetapi bagaimana mencetak hasilnya dalam file pdf?
Mirko Cianfarani
1
Namun, tidak membuat gambar.
Jan Pi
1
Aku suka ini! Beberapa tweak di sana-sini dan itu terlihat bagus. Dan satu hal kecil tidak menghapus jarak ekstra pada <body >itu membutuhkan ini: P
Phil Roggenbuck
2

Jika Anda ingin mengekspor tabel, Anda dapat melihat contoh ekspor ini yang disediakan oleh widget Grid UI Shield.

Ini dilakukan dengan memperluas konfigurasi seperti ini:

...
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
sumber
Fungsionalitas "Ekspor ke PDF" menghasilkan dokumen PDF kosong.
Richard Nalezynski
Mungkin konfigurasi yang salah pada akhir Anda ... Jika Anda mau, posting pertanyaan dengan tag shieldui
Vladimir Georgiev
2

Gunakan pdfMake.js dan Intisari ini .

(Saya menemukan inti di sini bersama dengan tautan ke paket html-to-pdfmake , yang akhirnya saya tidak gunakan untuk saat ini.)

Setelah npm install pdfmakedan menyimpan intisari, htmlToPdf.jssaya menggunakannya seperti ini:

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');

Catatan:

  • Kasus penggunaan saya adalah untuk menciptakan html relevan dari dokumen penurunan harga (dengan penurunan harga-itu ) dan kemudian menghasilkan pdf, dan meng-upload konten biner (yang saya bisa dapatkan dengan pdfMake'sgetBuffer() fungsi), semua dari browser. Pdf yang dihasilkan ternyata lebih baik untuk html semacam ini daripada dengan solusi lain yang saya coba.
  • Saya tidak puas dengan hasil yang saya dapatkan dari yang jsPDF.fromHTML()disarankan dalam jawaban yang diterima, karena solusi itu mudah dikacaukan oleh karakter khusus dalam HTML saya yang tampaknya ditafsirkan sebagai semacam markup dan benar-benar mengacaukan hasil PDF.
  • Menggunakan solusi berbasis kanvas (seperti jsPDF.from_html()fungsi yang tidak digunakan lagi , jangan bingung dengan jawaban yang diterima) bukan pilihan bagi saya karena saya ingin teks dalam PDF yang dihasilkan dapat di-paste, sedangkan solusi berbasis kanvas menghasilkan PDF berbasis bitmap.
  • Penurunan harga langsung ke konverter pdf seperti md-ke-pdf adalah sisi server saja dan tidak akan berfungsi untuk saya.
  • Menggunakan fungsi pencetakan browser tidak akan berfungsi untuk saya karena saya tidak ingin menampilkan PDF yang dihasilkan tetapi mengunggah konten binernya.
ilmiak
sumber
Jika saya membaca kode dengan benar, ini tidak mendukung gaya perbatasan CSS (misalnya pada tabel), benar?
ninjagecko
1

Saya bisa mendapatkan jsPDF untuk mencetak tabel yang dibuat secara dinamis dari 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");
    });
    });
});

Bekerja sangat baik dengan Chrome dan Firefox ... format semua diledakkan di IE.

Saya juga memasukkan ini:

<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
sumber
2
bisakah kamu memposting contoh bagaimana kamu lulus html
Erum
tetapi kode Anda <script src = " html2canvas.hertzen.com/build/html2canvas.js " > </… > yang artinya diperlukan internet?
Erum
1
@Erum, Anda dapat mengunduh File.
Eduardo Cuomo
0

Untuk menangkap div sebagai PDF, Anda dapat menggunakan solusi https://grabz.it . Itu punya API JavaScript yang mudah dan fleksibel dan akan memungkinkan Anda untuk menangkap konten elemen HTML tunggal seperti div atau rentang

Untuk mengimplementasikannya, Anda harus terlebih dahulu mendapatkan kunci dan rahasia aplikasi dan mengunduh (gratis) SDK.

Dan sekarang menjadi contoh.

Katakanlah Anda memiliki 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>

Untuk menangkap apa yang ada di bawah id fitur, Anda perlu:

//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>

Harap perhatikan target: #feature. #featureadalah Anda pemilih CSS, seperti pada contoh sebelumnya. Sekarang, ketika halaman dimuat tangkapan layar gambar sekarang akan dibuat di lokasi yang sama dengan tag skrip, yang akan berisi semua isi dari div fitur dan tidak ada yang lain.

Ini adalah konfigurasi dan penyesuaian lain yang dapat Anda lakukan untuk mekanisme div-screenshot, silakan periksa di sini

Johnny
sumber