PDF=True

E-mail notifications

Jan Sangill

Posted on 13/05/2025 08:27:17

Hi,
PDF=True just shows a 404 page whenever I add it to the URL. Has this been discontinued? Or could it be something else I should do. I am doing an upgrade from dw9 to dw10, and they use this functionality. I am on 10.14.3

//jan

Replies

Nicolai Pedersen

Posted on 13/05/2025 10:12:55

Hi Jan

Dynamicweb 10 does not support pdf=true - in DW9 it was build on tech that requires a full chrome browser server side and we cannot support that in DW10.

Also a lot has happened on PDF generation since that was originally made - it is very simple to create the PDF directly in the browser using html2pdf.js, pdf.js etc.

Using htmltopdf.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

<button id="download">Download PDF</button>

<script>
  document.getElementById('download').addEventListener('click', () => {
    const url = 'https://example.com'; // ← your URL here

    fetch(url)
      .then(res => res.text())
      .then(html => {
        const wrapper = document.createElement('div');
        wrapper.style.width = '800px';         // control page width
        wrapper.innerHTML = html;
        document.body.appendChild(wrapper);

        html2pdf()
          .from(wrapper)
          .set({
            margin:       10,
            filename:     'page.pdf',
            image:        { type: 'jpeg', quality: 0.98 },
            html2canvas:  { scale: 2 },
            jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
          })
          .save()
          .finally(() => document.body.removeChild(wrapper));
      })
      .catch(console.error);
  });
</script>

An alternative - little more low level:

Using jsPDF + html2canvas

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>

<button id="download2">Download PDF</button>

<script>
  const { jsPDF } = window.jspdf;

  document.getElementById('download2').addEventListener('click', async () => {
    const url = 'https://example.com'; // ← your URL
    const res = await fetch(url);
    const html = await res.text();

    const wrapper = document.createElement('div');
    wrapper.style.width = '800px';
    wrapper.innerHTML = html;
    document.body.appendChild(wrapper);

    const canvas = await html2canvas(wrapper, { scale: 2 });
    const imgData = canvas.toDataURL('image/jpeg', 0.98);

    const pdf = new jsPDF('p', 'mm', 'a4');
    const pdfWidth = pdf.internal.pageSize.getWidth();
    const imgProps = pdf.getImageProperties(imgData);
    const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

    pdf.addImage(imgData, 'JPEG', 0, 0, pdfWidth, pdfHeight);
    pdf.save('page.pdf');

    document.body.removeChild(wrapper);
  });
</script>

Jan Sangill

Posted on 13/05/2025 10:15:20

Hi Nicolai, Thank you for the response. Appreciated. It is noted. And it makes sense.

Nicolai Pedersen

Posted on 13/05/2025 10:17:33

Also - here is an example using print mode - printing the page you are on and then use CSS to hide e.g. print buttons and other things you need to hide:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>html2pdf + Print-Mode Example</title>

  <!-- html2pdf bundle (includes html2canvas + jsPDF) -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.min.js"></script>

  <style>
    /* print-mode styles: applied only when generating the PDF */
    .print-mode #export-pdf {
      display: none !important;
    }
    .print-mode body {
      /* make fonts a bit smaller in PDF */
      font-size: 12pt;
      line-height: 1.5;
    }
    .print-mode h2 {
      /* force page-breaks before each section */
      page-break-before: always;
    }
  </style>
</head>
<body>
  <h1>My Awesome Page</h1>
  <p>This content will go into the PDF—without the button.</p>

  <!-- Fixed-position button (hidden in PDF via .print-mode) -->
  <button id="export-pdf"
          style="position:fixed;top:1rem;right:1rem;z-index:1000;">
    Download PDF
  </button>

  <script>
    const button = document.getElementById('export-pdf');
    const opts = {
      margin:       10,
      filename:     'this-page.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }
    };

    button.addEventListener('click', () => {
      // 1. turn on our print-mode styles
      document.documentElement.classList.add('print-mode');

      // 2. generate & save PDF from the whole body
      html2pdf()
        .from(document.body)
        .set(opts)
        .save()
        .finally(() => {
          // 3. clean up: turn off print-mode styles
          document.documentElement.classList.remove('print-mode');
        });
    });
  </script>
</body>
</html>

You must be logged in to post in the forum

Developer forum

PDF=True

Replies