Javascript kullanarak div'de HTML'den pdf oluşturun

232

Aşağıdaki html kodu var:

<!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üm yapmak istediğim div "pdf" kimliğine sahip ne olursa olsun pdf yazdırmaktır. Bu JavaScript kullanılarak yapılmalıdır. Daha sonra "pdf" belgesi otomatik olarak "foobar.pdf" dosya adıyla indirilmelidir.

Bunu yapmak için jspdf kullanıyorum, ancak sahip olduğu tek işlevi yalnızca metin değerlerini kabul "metin" dir. Metin değil jspdf'ye HTML göndermek istiyorum.

javascript  jspdf 
— John Crawford
kaynak
1
Yukarıda bahsedildiği gibi ben do not "metin" fonksiyonunu kullanmak istiyorum. HTML vermek istiyorum. Bağlantınız yalnızca düz metinle ilgileniyor, html ile değil
— John Crawford
2
jsPDF yapar bir olması fromHTMLfonksiyonu; "HTML İşleyici" örneğine bakın: mrrio.github.io/jsPDF
— mg1075
— Kod Spy

Yanıtlar:

228

jsPDF eklentileri kullanabilir. HTML'yi yazdırmasını sağlamak için belirli eklentileri eklemeniz gerekir ve bu nedenle aşağıdakileri yapmanız gerekir:

  1. Https://github.com/MrRio/jsPDF adresine gidin ve en son Sürümü indirin.
  2. Projenize aşağıdaki Komut Dosyalarını ekleyin:
    • jspdf.js
    • jspdf.plugin.from_html.js
    • jspdf.plugin.split_text_to_size.js
    • jspdf.plugin.standard_fonts_metrics.js

Belirli öğeleri yoksaymak istiyorsanız, bunları bir kimlikle işaretlemeniz gerekir; bu öğe daha sonra jsPDF'nin özel bir öğe işleyicisinde yok sayabilirsiniz. Bu nedenle HTML'niz şöyle görünmelidir:

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

Ardından, oluşturulan PDF'yi bir PopUp'ta açmak için aşağıdaki JavaScript kodunu kullanırsınız:

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

Benim için bu, 'bunu pdf'ye yazdır' satırını içeren güzel ve düzenli bir PDF oluşturdu.

Özel öğe işleyicilerin yalnızca geçerli sürümdeki, GitHub Sayısında da belirtilen kimliklerle ilgilendiğini lütfen unutmayın . Belirtir:

Eşleştirme, düğüm ağacındaki her öğeye karşı yapıldığı için arzum mümkün olduğunca hızlı hale getirmekti. Bu durumda, "Yalnızca öğe kimlikleri eşleştirilir" anlamına gelir Öğe kimlikleri hala "#id" jQuery stilinde yapılır, ancak bu tüm jQuery seçicilerinin desteklendiği anlamına gelmez.

Bu nedenle '#ignorePDF' yerine '.ignorePDF' gibi sınıf seçicileri koymak benim için işe yaramadı. Bunun yerine, göz ardı etmek istediğiniz her öğe için aynı işleyiciyi eklemeniz gerekir:

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

Gönderen örnekler aynı zamanda bir 'veya 'li' gibi etiketler seçmek mümkün olduğu belirtilmektedir. Yine de çoğu kullanım için biraz kısıtlayıcı olabilir:

Özel eleman işleyicileri destekliyoruz. Kimlik veya düğüm adı için bunları jQuery tarzı kimlik seçiciyle kaydedin. ("#iAmID", "div", "span" vb.) Şu anda başka herhangi bir seçici (sınıf, bileşik) türü için destek bulunmamaktadır.

Eklenecek çok önemli bir şey, tüm stil bilgilerinizi (CSS) kaybetmenizdir. Neyse ki jsPDF, benim amacım için yeterli olan h1, h2, h3 vb. Ayrıca, yalnızca metin düğümleri içindeki metinleri yazdırır, bu da metin ve benzeri değerlerini yazdırmayacağı anlamına gelir. Misal:

<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
kaynak
3
Öğe işleyicisinin bir sınıf olabileceğini tahmin ediyorum. Bu HTML5 standartlarına çok daha semantik olarak uygun olacaktır. Bir ID sadece CSS'de çok fazla özgüllük ağırlığı taşımakla kalmaz, aynı zamanda benzersiz olmalıdır.
— Emir
Hayır, bildiğim kadarıyla, sınıflar şu anda örneklerinde belirtildiği gibi geçerli bir seçici değiller: "özel eleman işleyicilerini destekliyoruz. Onları kimlik veya düğüm adı için jQuery tarzı kimlik seçici ile kaydedin. (" #İAmID ", "div", "span" vb.) Şu anda başka herhangi bir seçici (sınıf sınıfı, bileşik) için destek bulunmamaktadır. " Yine de, kullanım durumunuza uygunsa ve sayfanızdaki diğer önemli öğeleri gizlemiyorsa etiket adlarını kullanmak mümkündür.
— snrlx
Parall.ax/products/jspdf sayfasında IE6 + ' yı bir dolgu ile desteklediklerini belirtirler. Yine de kendim denemedim.
— snrlx
2
@snrlx Boş pdf alıyorum ve bu hata: renderer.pdf.sHashCode bir işlev değil
— Lisa Solomon
5
"Belirli unsurları görmezden gelmek istiyorsanız, onları bir kimlik ile işaretlemeniz gerekir" - ters çevrilmiş bu satın alma ile harap olmuş harika bir kütüphane. OP <div>yüzlerce olabilir bir tek yazdırmak istedi - bu yüzden tüm istenmeyen DOM öğeleri işaretlemek zorunda ??
— Mawg diyor Monica
53

Bu basit bir çözümdür. Javascript yazdırma konseptini kullanabilir ve bunu pdf olarak kaydedebilirsiniz.

<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
kaynak
27
"ve basit pdf olarak kaydedin" - Ben bu kısmı özledim. Bunu nasıl yapıyorsun?
— Mawg diyor Monica
9
Bu benim için çalıştı, CSS stil sorunu çözmek için, printPDF.css adlı başka bir css dosyası oluşturdum ve yukarıdaki örnekte olduğu gibi bağlantı etiketi kullanarak ekledim: printWindow.document.write ('<html> <head> <title> DIV İçeriği </title> '); printWindow.document.write ('<link rel = "stil sayfası" href = "../ css / printPDF.css" />'); printWindow.document.write ('</head> <body>');
— Şubat'ta Prime_Coder
2
Bazı yorumlar: 1) Baskı için özel bir stil sayfasına ihtiyacınız yok. Mevcut stil sayfanızda şöyle bir şey yapın: @media print {.pageBreak {page-break-before: always; } .labelPdf {font-weight: kalın; yazı tipi boyutu: 20 piksel; } .noPrintPdf {display: yok; }} ve bu sınıfları ihtiyaçlarınız olarak kullanın. 2) .live ("click", ...) bana çalışmıyor, bunun yerine .on ("click", ...) kullanıyorum.
— Davidson Lima
1
@ DavidsonLima bu kod eski pencere css görmeyecek yeni bir pencere oluşturur. Bu yüzden css "yoksayıyor", görmezden gelmiyor, sadece yeni pencerede yüklü değil. Sadece kafasına yükleyin ve render olacak.
— Lukas Liesis
1
Herhangi birinin Angular ile bunu yapmaya çalışması durumunda, lütfen CSS dosyanızı varlıklar klasörüne koyun.
— rgantla
16

AutoPrint () öğesini kullanabilir ve çıktıyı şu şekilde 'dataurlnewwindow' olarak ayarlayabilirsiniz:

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
kaynak
1
Merak ediyorum, bu hiç OP dışında herhangi biri için işe yaradı mı? Kodu okurken, sadece bir kimliği olan öğelerle çalışacağını anlıyorum. Muhtemelen bundan biraz daha karmaşık, nasıl olsa bu işi nasıl yapacağım hakkında hiçbir fikrim yok.
— Michael
14
Çok ironik bir şekilde gözlemlediğim kadarıyla fromHTML sadece parametre olarak gönderilen eleman herhangi bir HTML içermiyorsa çalışır: sadece düz metin desteklenir. Her şey imo'nun amacını öldürür.
— Michael
Benim için mükemmel çalıştı. Aktarmak istediğiniz öğenin bir kimliğe sahip olması gerekmez. Bu, kopyalayıcının geçmek istediği düğümü bulmasının yoludur. Ayrıca bu çözüm 'printDoc.autoPrint ()' olmadan da çalışır. Bu belirli satırı kodda bırakmak istiyorsanız, autoPrint-Plugin'i eklemeniz gerekir.
— snrlx
13

Belirli bir sayfanın indirilebilir pdf'ine ihtiyacınız varsa böyle bir düğme ekleyin

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

yalnızca div değil tüm sayfanızı yazdırmak için window.print () kullanın

— Wael Mahmoud
kaynak
2
document.querySelector("#myIframe").contentWindow.print()
— İfadenin indirilebilir bir pdf'ini
11

Belirtildiği gibi, jsPDF ve html2canvas kullanmalısınız . Ayrıca otomatik olarak pdf birden çok sayfaya ( kaynaklar ) böler jsPDF sorunları içinde bir işlev buldum

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
kaynak
3
görüntüleri dönüştürmez
— Probosckie
1
cevap için teşekkürler, A4 sayfa formatına nasıl koyacağınız hakkında herhangi bir ipucu verebilir misiniz?
— johannesMatevosyan
3
Bu gerçekten iyi bir vektör pdf yapmaz, tuval ile çok sayıda bitmap yapar ve bunları görüntü olarak yığınlar. Sonuç birçok dezavantaja sahiptir - büyük, düşük kalite, PDF'den kopyalayıp yapıştıramaz, vb ...
— Roman Zenka
6

Bunun bir yolu window.print () işlevini kullanmaktır. Hangi kütüphane gerektirmez

Artıları

Harici kütüphane gerekmez.

2.Biz de sadece vücudun seçilen bölümlerini yazdırabilirsiniz.

3. css çakışma ve js sorunları yok.

4.Core html / js işlevselliği

--- Sadece aşağıdaki kodu ekleyin

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

JS kodu - btn tıklamasıyla çağırma işlevi

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

Not: Her css nesnesinde!

Misal - 

.legend  {
  background: #9DD2E2 !important;
}
— Rohit Parte
kaynak
Tarayıcıların Yazdırma işleviyle ilgili sorunlar var. Kullanıcılar genellikle Yazdırma görünümü için varsayılan seçeneklere sahiptir (kenar boşlukları, sayfa boyutu ve daha fazlası). Bu nedenle, eğitim kullanıcısı olmadan gerekli stil ile gerekli PDF'yi üretmek çok zordur, bu çok daha zor ve neredeyse imkansızdır ...
— Rahmat Ali
4

css render için jspdf ve html2canvas kullanın ve bu benim kod olarak belirli div içeriği ihracat

$(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
kaynak
Bu çalışma ancak içeriği görüntüye dönüştürme
— Samad
Ayrıca, sayfa sonunu, içeriğin / resmin geçerli sayfaya sığmazsa yeni sayfaya yazdırılacağı şekilde nasıl ayarlanır?
— SHEKHAR SHETE
4
  • Bağımlılık yok, saf JS
  • CSS veya resimler eklemek için - göreli URL'ler kullanmayın, tam URL'leri kullanın http://...domain.../path.css. Ayrı bir HTML belgesi oluşturur ve ana içeriği yoktur.
  • görüntüleri base64 olarak da gömebilirsiniz

Bu bana yıllarca hizmet etti:

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
kaynak
1
Bu sorun pdf içinde herhangi bir css etkisi olmayacak olmasıdır.
— Shadab Faiz
@ShadabFaiz Olacak, ancak ana pencere ile aynı olmayabilir. Yine de bu html için özel css ekleyebilirsiniz.
— Lukas Liesis
Evet. Iagree ile css pencereye ekleyebilirsiniz ama nasıl sonuç pdf dosyası yazdırmak?
— Mirko Cianfarani
1
Yine de görüntü oluşturmaz.
— Jan Pi
1
Bunu seviyorum! Orada burada bazı ayarlar ve iyi görünüyor. Ve küçük bir şey buna ekstra boşluk kaldırmayın <body >gerekir: P
— Phil Roggenbuck
2

Bir tabloyu dışa aktarmak istiyorsanız, bu dışa aktarma örneğine göz atabilirsiniz , Shield UI Grid widget'ı tarafından sağlanan .

Yapılandırma şu şekilde genişletilerek yapılır:

...
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
kaynak
"PDF'ye Dışa Aktar" işlevi boş bir PDF belgesiyle sonuçlandı.
— Richard Nalezynski
Sonunda muhtemelen yanlış yapılandırma ... İsterseniz, shieldui etiketi ile bir soru gönderin
— Vladimir Georgiev
2

PdfMake.js ve bu Gist'i kullanın .

( Gist'i burada html-to-pdfmake paketine bir bağlantıyla birlikte buldum şimdilik kullanmayan sona.)

Sonra npm install pdfmakeve Gist kaydetme htmlToPdf.jsben böyle kullanmak:

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

Uyarılar:

  • Benim kullanım durumu (bir markdown belgeden ilgili html oluşturmaktır markdown-it ve sonradan pdf üreten ve ben birlikte alabileceğiniz (onun ikili içerik yükleyerek) pdfMake'sgetBuffer() tarayıcısından hepsi fonksiyonu). Oluşturulan pdf, html için bu tür denedim diğer çözümlere göre daha güzel olduğu ortaya çıkıyor.
  • Aldığım sonuçlardan memnun değilim jsPDF.fromHTML()Kabul edilen cevapta önerdiğim , çünkü bu çözüm, HTML'deki görünüşte bir çeşit işaretleme olarak yorumlanan ve ortaya çıkan PDF'yi tamamen bozan özel karakterler tarafından kolayca karışıyor.
  • Tuval tabanlı çözümler kullanmak (kullanımdan kaldırılmış jsPDF.from_html()işlev gibi, kabul edilen yanıttan biriyle karıştırılmamak gibi) benim için bir seçenek değil çünkü oluşturulan PDF'deki metnin katlanabilir olmasını isterken, tuval tabanlı çözümler bitmap tabanlı PDF'ler oluşturur.
  • Md-to-pdf gibi pdf dönüştürücülerine doğrudan işaretleme sadece sunucu tarafındadır ve benim için çalışmaz.
  • Oluşturulan PDF'yi görüntülemek istemediğim, ancak ikili içeriğini yüklediğim için tarayıcının yazdırma işlevini kullanmak benim için işe yaramayacaktı.
— ilmiacs
kaynak
Kodu doğru okursam, bu CSS kenarlık stillerini desteklemez (örn. Tablolarda), değil mi?
— ninjagecko
1

Bir div dinamik olarak oluşturulan tabloları yazdırmak için jsPDF elde edebildi.

$(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");
    });
    });
});

Chrome ve Firefox ile harika çalışıyor ... biçimlendirme tüm IE'de patladı.

Bunları da dahil ettim:

<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
kaynak
2
u pls html geçmek nasıl örnek gönderebilirsiniz
— Erum
ancak kodunuz <script src = " html2canvas.hertzen.com/build/html2canvas.js " > </… > yani internete ihtiyacı var mı?
— Erum
1
@Erum dosyasını indirebilirsiniz.
— Eduardo Cuomo
0

Div'ı PDF olarak yakalamak için https://grabz.it çözümünü kullanabilirsiniz . Kolay ve esnek olan ve div veya span gibi tek bir HTML öğesinin içeriğini yakalamanızı sağlayacak bir JavaScript API'sı var.

Uygulamak için önce bir uygulama anahtarı ve sırrı almanız ve (ücretsiz) SDK'yı indirmeniz gerekir.

Ve şimdi bir örnek.

Diyelim ki HTML'niz var:

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

Özellik kimliği altında ne olduğunu yakalamak için yapmanız gerekenler:

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

Lütfen dikkat edin target: #feature. #featureönceki örnekte olduğu gibi siz CSS seçicisiniz. Şimdi, sayfa yüklendiğinde, komut dosyası etiketiyle aynı konumda bir görüntü ekran görüntüsü oluşturulacak ve bu özellik div özelliklerinin tüm içeriğini içerecek ve başka hiçbir şey içermeyecek.

Div-ekran görüntüsü mekanizmasına yapabileceğiniz diğer yapılandırma ve özelleştirme, lütfen buradan kontrol edin

— Johnny
kaynak
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.