vue3 在线pdf预览：[email protected]

1.

        下载插件：pdfjs-dist，版本：@3.5.141

"pdfjs-dist": "^3.5.141",

2.

        dom结构：

<a-modal v-model:open="open" @ok="handleOk" width="auto" max-width="100%" height="100%">
     <div id="container" class="container">
        <canvas id="theCanvas"></canvas>
          <div class="oprate">
             <button @click="prev">prev</button>
             <span> {{ state.currentPage }} / {{ state.numPages }} </span>
             <button @click="next">next</button>
          </div>
     </div>
</a-modal>

3.

        引入pdfjs-dist

import * as pdfjsLib from "pdfjs-dist/build/pdf";
import "pdfjs-dist/web/pdf_viewer.css";
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.10.111/build/pdf.worker.min.js"

4.

        加载pdf

//数据
let state = reactive({
    loadingTask: null,
    currentPage: 1,
    numPages: 0,
    selectedPage: 1
})




let renderPage = (num) => {
    const canvas = document.getElementById("theCanvas");
    const context = canvas.getContext("2d");
    const scale = 1.5;
    state.loadingTask.promise.then((pdf) => {
        pdf.getPage(num).then((page) => {
            const viewport = page.getViewport({ scale });
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            const renderContext = {
                canvasContext: context,
                viewport: viewport,
            };
            page.render(renderContext);
        });
    });
}



let getPdf = async () => {
    const pdfUrl = "/src/assets/pdf/pdf.pdf";
    // state.loadingTask = pdfjsLib.getDocument(pdfUrl) //直接传pdf地址，不显示中文
    state.loadingTask = pdfjsLib.getDocument({url: pdfUrl, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.10.111/cmaps/', cMapPacked: true}); //传对象才会显示中文
    state.loadingTask.promise.then((pdf) => {
        state.numPages = pdf.numPages;
        renderPage(1);
    });
}



onMounted(() => {
    getPdf()
})

5.上一页、下一页

let prev = () => {
    if (state.currentPage > 1) {
        state.currentPage--;
        renderPage(state.currentPage);
    }
}

let next = () => {
    if (state.currentPage < state.numPages) {
        state.currentPage++;
        renderPage(state.currentPage);
    }
}

6.

        完整代码

<template>
    <a-modal v-model:open="open" @ok="handleOk" width="auto" max-width="100%" height="100%">
        <div id="container" class="container">
            <canvas id="theCanvas"></canvas>
            <div class="oprate">
                <button @click="prev">prev</button>
                <span> {{ state.currentPage }} / {{ state.numPages }} </span>
                <button @click="next">next</button>
            </div>
        </div>
    </a-modal>
</template>

<script setup>
import { onMounted, reactive, ref, nextTick} from "vue"
import * as pdfjsLib from "pdfjs-dist/build/pdf";
import "pdfjs-dist/web/pdf_viewer.css";
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdn.jsdelivr.net/npm/pdfjs-dist@3.10.111/build/pdf.worker.min.js"

let open = ref(false)

//数据
let state = reactive({
    loadingTask: null,
    currentPage: 1,
    numPages: 0,
    selectedPage: 1
})

let renderPage = (num) => {
    const canvas = document.getElementById("theCanvas");
    const context = canvas.getContext("2d");
    const scale = 1.5;
    state.loadingTask.promise.then((pdf) => {
        pdf.getPage(num).then((page) => {
            const viewport = page.getViewport({ scale });
            canvas.height = viewport.height;
            canvas.width = viewport.width;
            const renderContext = {
                canvasContext: context,
                viewport: viewport,
            };
            page.render(renderContext);
        });
    });
}
let getPdf = async () => {
    const pdfUrl = "/src/assets/pdf/pdf.pdf";
    // state.loadingTask = pdfjsLib.getDocument(pdfUrl) //直接传pdf地址，不显示中文
    state.loadingTask = pdfjsLib.getDocument({url: pdfUrl, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@3.10.111/cmaps/', cMapPacked: true}); //传对象才会显示中文
    state.loadingTask.promise.then((pdf) => {
        state.numPages = pdf.numPages;
        renderPage(1);
    });
}

let prev = () => {
    if (state.currentPage > 1) {
        state.currentPage--;
        renderPage(state.currentPage);
    }
}

let next = () => {
    if (state.currentPage < state.numPages) {
        state.currentPage++;
        renderPage(state.currentPage);
    }
}

//关闭
let handleOk = () => {
    open.value = false
}

//打开
let openPdf = () => {
    open.value = true
    nextTick(() => {
        getPdf();
    })
}

onMounted(() => {

})

defineExpose({
    openPdf
})

</script>

<style scoped lang="less">
.container{
    position: relative;
    .operate{
        position: absolute;
        right: 0;
        top: 0;
    }
}
</style>