vue 预览 pdf

pdf.js下载链接

参考样例一

Vue.component("pdf-viewer", {
    template: "<a-row><div ref="pdfViewContainer" style="width: 100%"><div id="viewer" class="pdfViewer"></div></div></a-row>",
    props: {
        path: {
            type: String
        }
    },
    mounted: function () {
        if (!pdfjsLib||!pdfjsViewer||!pdfjsLib.getDocument || !pdfjsViewer.PDFViewer) {
            console.error("Can not load pdf viewer");
            return;
        }

        
        
        pdfjsLib.GlobalWorkerOptions.workerSrc = this.getFullPath("path/to/pdf.worker.js");

       
        let CMAP_URL = this.getFullPath("path/to/web/cmaps/");
        let CMAP_PACKED = true;

        var pdfViewer = new pdfjsViewer.PDFViewer({
            container: this.$refs.pdfViewContainer,
        });

        document.addEventListener("pagesinit", function () {
            pdfViewer.currentScaleValue = "page-width";
        });

        // Loading document.
        var loadingTask = pdfjsLib.getDocument({
            url: this.getUrlByPath(this.path),
            cMapUrl: CMAP_URL,
            cMapPacked: CMAP_PACKED,
        });
        loadingTask.promise.then(function (pdfDocument) {
            pdfViewer.setDocument(pdfDocument);
        });
    }
});