1

我正在尝试使用 Pdf.js 库显示 pdf。此 pdf 保存在 IndexedDb 上的 blob 中，然后创建我通过属性传递给组件的 url。

父元素：

<pdf-viewer id="pdfElement" Pdf="${URL.createObjectURL(this.Pdf)}"></pdf-viewer>

“this.Pdf”包含 blob 文件

子元素：

import { LitElement, html } from 'lit-element';
import * as pdfjsLib from 'pdfjs-dist';


class PdfViewer extends LitElement {
    static get properties() {
        return{
            Pdf: {type: String}
        }
    }

    constructor() {
        super();
        console.log("pdf-viewer start");
        this.readyPromise = new Promise(resolve => {
            this.resolveReady = resolve;
        });
    }

    connectedCallback() {
        super.connectedCallback();
        this.resolveReady();
    }

    render(){
        html`
            <style>
                canvas{
                    box-shadow: 0 3px 6px #0004;
                    border-radius: 6px;
                }
            </style>

            <canvas id="canvas"></canvas>
            
        `;
    }


    attributeChangedCallback(attr, oldVal, val) {
        
        console.log("[pdf-viewer] Attribute: ", attr, "changed from ",oldVal, " to ", val);
        if (attr === "pdf" && val != null) {
            this.setPdf(val);
        }
    }

    async setPdf(file) {
        console.log("pdf-viewer setPdf path: ", file)
        await this.readyPromise;
        /*let typedarray = new Uint8Array(file);
        console.log("typedarray", typedarray)*/

        let loadingTask = pdfjsLib.getDocument(file);
        loadingTask.promise.then(pdf => {
            for (let i = 1; i <= pdf.numPages; i++) {
                console.log('PDF loaded');
                pdf.getPage(i).then(function (page) {
                    console.log('Page loaded');

                    let scale = 1.5;
                    const viewport = page.getViewport({scale: scale});

                    // Prepare canvas using PDF page dimensions
                    const canvas = this.shadowRoot.getElementById('canvas');
                    const context = canvas.getContext('2d');
                    canvas.height = viewport.height;
                    canvas.width = viewport.width;

                    // Render PDF page into canvas context
                    let renderContext = {
                        canvasContext: context,
                        viewport: viewport
                    };
                    const renderTask = page.render(renderContext);
                    renderTask.promise.then(function () {
                        console.log('Page rendered');
                    });
                });
            }
        }, function (reason) {
            // PDF loading error
            console.error(reason);
        });

    }
}

customElements.define("pdf-viewer", PdfViewer);

目前，运行代码，我收到此错误： 来自控制台 Web 的错误

npm i pdfjs-dist -save我按照 gitlab 文档（ ）通过 npm 安装了库

对这个库没有太多经验，并且找到了一个不是很详尽的文档，我请求你帮助解决这个问题

4

0 回答 0