Javacript | HTML TO PDF ?

15-04-2023, 14:50:50

Merhabalar arkadaşlar boş bir sayfada basit bir yapıda html tablo var başlıklar kısmı renkli sadece bu taboyu renkli şekilde çıktı alınabilecek hale getirmem lazım.
Resimi pdfe çevirme falan istemiyorum gerçekten yazıları kopyalanabilir bir pdf formatında olması gerekiyor.
Nasıl yapabilirim başına gelen oldu mu ?
jsPDF kütüphanesini kullandım düzgün çalışmadı.

resimdeki gibi bir tablo boş sayfada durmakta.

15-04-2023, 15:00:23

#2

emrenogay

JavaScript kullanarak bir HTML sayfasını PDF'e dönüştürmek için, pdfmake gibi bir JavaScript kütüphanesi kullanabilirsiniz. pdfmake, JavaScript'te PDF oluşturmak için kullanılan bir kütüphanedir ve basit bir kullanıma sahiptir.
pdfmake'i kullanarak, aşağıdaki örnek kodla bir HTML sayfasını PDF'e dönüştürebilirsiniz:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>
  </head>
  <body>
    <h1>HTML to PDF</h1>
    <button onclick="generatePDF()">PDF Oluştur</button>

    <script>
      function generatePDF() {
        var content = document.getElementsByTagName('body')[0].innerHTML;
        var docDefinition = {
          content: function() {
            return [
              { text: content }
            ];
          },
          styles: {
            header: {
              fontSize: 22,
              bold: true
            },
            subheader: {
              fontSize: 18,
              bold: true,
              margin: [0, 15, 0, 0]
            }
          }
        };
        pdfMake.createPdf(docDefinition).open();
      }
    </script>
  </body>
</html>

PDF Oluştur butonuna tıklandığında, body etiketi altındaki içeriği PDF'e aktarır.

15-04-2023, 15:07:18

#3

kaptan55

emrenogay adlı üyeden alıntı: mesajı görüntüle

JavaScript kullanarak bir HTML sayfasını PDF'e dönüştürmek için, pdfmake gibi bir JavaScript kütüphanesi kullanabilirsiniz. pdfmake, JavaScript'te PDF oluşturmak için kullanılan bir kütüphanedir ve basit bir kullanıma sahiptir.
pdfmake'i kullanarak, aşağıdaki örnek kodla bir HTML sayfasını PDF'e dönüştürebilirsiniz:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/vfs_fonts.js"></script>
  </head>
  <body>
    <h1>HTML to PDF</h1>
    <button onclick="generatePDF()">PDF Oluştur</button>

    <script>
      function generatePDF() {
        var content = document.getElementsByTagName('body')[0].innerHTML;
        var docDefinition = {
          content: function() {
            return [
              { text: content }
            ];
          },
          styles: {
            header: {
              fontSize: 22,
              bold: true
            },
            subheader: {
              fontSize: 18,
              bold: true,
              margin: [0, 15, 0, 0]
            }
          }
        };
        pdfMake.createPdf(docDefinition).open();
      }
    </script>
  </body>
</html>

PDF Oluştur butonuna tıklandığında, body etiketi altındaki içeriği PDF'e aktarır.

Boş çıktı verdi ama

15-04-2023, 15:25:06

#4

emrenogay

kaptan55 adlı üyeden alıntı: mesajı görüntüle

Boş çıktı verdi ama

"text: content" kısmını "html: content" olarak değiştirmeyi dener misiniz? Ek olarak çalışma şartlarından biri yerel olarak HTML dosyasında değil bir web sunucusu üzerinde çalıştırmaktır.

15-04-2023, 15:31:14

#5

emrenogay

kaptan55 adlı üyeden alıntı: mesajı görüntüle

Boş çıktı verdi ama

<!doctype html>
<html lang='tr'>
<head>
    <meta charset='utf-8'>
    <title>Test pdf make</title>

    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>

    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
</head>
<body>
[…]
<script>
    var val = htmlToPdfmake("<h1>test</h1><p>test</p>");
    var dd = {content:val};
    pdfMake.createPdf(dd).open();
</script>
</body>
</html>

eğer PDF açma yerine indirmesini isterseniz, .open(); fonksiyonu yerine .download(); fonksiyonunu kullanabilirsiniz.

15-04-2023, 16:48:53

#6

kaptan55

emrenogay adlı üyeden alıntı: mesajı görüntüle

<!doctype html>
<html lang='tr'>
<head>
    <meta charset='utf-8'>
    <title>Test pdf make</title>

    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/pdfmake.min.js'></script>
    <script src='https://cdn.jsdelivr.net/npm/pdfmake@latest/build/vfs_fonts.min.js'></script>

    <script src="https://cdn.jsdelivr.net/npm/html-to-pdfmake/browser.js"></script>
</head>
<body>
[…]
<script>
    var val = htmlToPdfmake("<h1>test</h1><p>test</p>");
    var dd = {content:val};
    pdfMake.createPdf(dd).open();
</script>
</body>
</html>

eğer PDF açma yerine indirmesini isterseniz, .open(); fonksiyonu yerine .download(); fonksiyonunu kullanabilirsiniz.

Sanırım node.js de aynı olur diyorsun.