时间戳

首页 > 解决方案 > 使用 mozilla 中的 pdfjs 库在 svelte 应用程序中显示 pdf 文件

svelte - 使用 mozilla 中的 pdfjs 库在 svelte 应用程序中显示 pdf 文件

问题描述

我有一个 Showpdf.svelte 组件，如下面的代码所示。如果在组件的 App.svelte 中调用此代码并执行此代码，则 pdf 文件不会显示在浏览器中，而是会下载。我想使用 sveltejs 应用程序在浏览器中显示一个 pdf 文件。如果有人帮助解决这个问题，我将不胜感激。

<script>
    pdfjsLib
        .getDocument("https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf")
        .then((doc) => {
            console.log(doc._pdfInfo.numPages);
            doc.getPages(1).then((page) => {
                let myCanvas = document.getElementById("my_canvas");
                let context = myCanvas.getContetxt("2d");

                let viewport = page.getViewport(1);
                myCanvas.width = viewport.width;
                myCanvas.height = viewport.height;

                page.render({
                    canvasContext: context,
                    viewport: viewport,
                });
            });
        });
</script>

<style>
</style>

<canvas id="my_canvas" />

标签： sveltepdfjs

解决方案

您可以使用该bind:this指令获得对画布的引用，并使用它来呈现 PDF，如文档的示例部分所述。

例子

<svelte:head>
  <script src="//mozilla.github.io/pdf.js/build/pdf.js"></script>
</svelte:head>

<script>
    let canvasRef;
    
    const data = atob(
        'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
        'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
        'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
        'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
        'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
        'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
        'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
        'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
        'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
        'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
        'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
        'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
        'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G'
    );
    
    // Loaded via <script> tag, create shortcut to access PDF.js exports.
    const pdfjsLib = window['pdfjs-dist/build/pdf'];
    
    // The workerSrc property shall be specified.
    pdfjsLib.GlobalWorkerOptions.workerSrc = '//mozilla.github.io/pdf.js/build/pdf.worker.js';
    
    pdfjsLib
        .getDocument({ data }).promise
        .then(doc => doc.getPage(1))
        .then(page => {
            const scale = 1.5;
            const viewport = page.getViewport({ scale });

            // Prepare canvas using PDF page dimensions
            var context = canvasRef.getContext('2d');
            canvasRef.height = viewport.height;
            canvasRef.width = viewport.width;

            // Render PDF page into canvas context
            var renderContext = {
                canvasContext: context,
                viewport: viewport
            };

            page.render(renderContext);
        });
</script>

<canvas bind:this={canvasRef} />

推荐阅读