Developer forum

Did you solve this issue? We are experiencing this on a DW10 project and currently we've found no solution.

Hi Joakim

In DW9 we used a very heavy image component that could also render PDF files and flatten them as images. This was possible using Windows technology (GDI+) and Chrome in later versions. 80% of DW9 distribution size was related to that one feature.

The image handler we are using on Dynamicweb 10 is .NET only and platform independent - it is not GDI, C or anything like that - and it does not support rendering PDF files into images. Technically the programatic contract is still present, so if you do it your self, you can create a component to do this. But I would strongly recommend not to do it. Problem is that some really heavy 3rd party components needs to be taken in use, and we have had a lot of issues keeping them up-to-date, always running and you name it. So it will not come back unless we find a simple solution.

Instead of creating the thumbnail server-side, create it on the frontend using pdfjs - something like this.

<script type="module">
  import * as pdfjsLib from "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.mjs";

  // Required: point PDF.js at its worker
  pdfjsLib.GlobalWorkerOptions.workerSrc =
    "https://cdn.jsdelivr.net/npm/pdfjs-dist@4.10.38/build/pdf.worker.mjs";

  const pdfUrl = "/Files/Manuals/sample.pdf"; // SAME ORIGIN
  const canvas = document.getElementById("pdfPreview");
  const ctx = canvas.getContext("2d");

  async function renderFirstPage() {
    // Load PDF
    const pdf = await pdfjsLib.getDocument(pdfUrl).promise;

    // Get first page
    const page = await pdf.getPage(1);

    // Scale controls sharpness vs performance
    const scale = 1.4;
    const viewport = page.getViewport({ scale });

    // Prepare canvas
    canvas.width = Math.floor(viewport.width);
    canvas.height = Math.floor(viewport.height);

    // Render page into canvas
    await page.render({
      canvasContext: ctx,
      viewport
    }).promise;
  }

  renderFirstPage().catch(err => {
    console.error("PDF render failed:", err);
  });
</script>

Also vice-versa - if you still have customer that needs PDF from html, that can also be done in the browser instead. Se e.g. this: https://doc.dynamicweb.com/forum/dynamicweb-10/pdf-true?PID=1605