vue3 实现pdf预览

需要下载pdfjs-dist

<template>
    <a-modal class="fill-modal" v-model:open="state.visible" :title="state.modalTitle" width="50%" @cancel="handleCancel">
        <div class="preview-btns-posi">
            <a-button type="primary" @click="exportBtn" :loading="state.downLoading">下载</a-button>
            <a-button @click="handleCancel" type="primary">返回</a-button>
        </div>
        <div class="interviewVideo_main" id="videoContainer">
            <!--此处根据pdf的页数动态生成相应数量的canvas画布-->
            <canvas v-show="state.show" v-for="pageIndex in pdfPages" :id="`pdf-canvas-` + pageIndex" :key="pageIndex"
                style="display: block;width:100%;" class="canvas"></canvas>
        </div>
        <template #footer></template>
    </a-modal>
</template>
<script lang="ts" setup>
import { ref, reactive, nextTick } from "vue";
import * as pdfjsLib from "pdfjs-dist/build/pdf.js";

import * as workerSrc from 'pdfjs-dist/build/pdf.worker.min.js'
import { message } from "ant-design-vue";
import { downloadBlobAsync } from "@/lib/tool";


let pdfPages = ref(0); // pdf文件的页数
let pdfDoc: any = reactive({})
let pdfScale = ref(1.0); // 缩放比例
const state: any = reactive({
    visible: false,
    downLoading: false,
    modalTitle: '预览文件',
    show: false
})
const props = defineProps<{
    file: {
        previewPath: string,
        originalFileName: string,
        path: string,
    }
}>()

//调用loadFile方法
//获取pdf文档流与pdf文件的页数
const loadFile = async (url: string) => {
    try {
        pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrc;
        const loadingTask = pdfjsLib.getDocument(url);
        loadingTask.promise.then((pdf: any) => {
            state.show = true;
            pdfDoc = pdf;
            pdfPages.value = pdf.numPages;
            nextTick(() => {
                renderPage(1);
            });
        }).catch((err: any) => {
            console.error(err);
            pdfDoc = null
            state.show = false
        });
    } catch (error) {
        console.error(error)
    }
};
//渲染pdf文件
const renderPage = (num: number) => {
    pdfDoc?.getPage(num).then((page: any) => {
        const canvasId = "pdf-canvas-" + num;
        const canvas = <any>document.getElementById(canvasId);
        const ctx = canvas.getContext("2d");
        const dpr = window.devicePixelRatio || 1;
        const bsr =
            ctx.webkitBackingStorePixelRatio ||
            ctx.mozBackingStorePixelRatio ||
            ctx.msBackingStorePixelRatio ||
            ctx.oBackingStorePixelRatio ||
            ctx.backingStorePixelRatio ||
            1;
        const ratio = dpr / bsr;
        const viewport = page.getViewport({ scale: pdfScale.value });
        canvas.width = viewport.width * ratio;
        canvas.height = viewport.height * ratio;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
        const renderContext = {
            canvasContext: ctx,
            viewport: viewport,
        };
        page.render(renderContext);
        if (num < pdfPages.value) {
            renderPage(num + 1);
        }
    });
};
function openModal() {
    state.visible = true;
    nextTick(() => {
        loadFile(props.file.previewPath);
    })
}
function handleCancel() {
    state.visible = false;
}
async function exportBtn() {
    try {
        state.downLoading = true
        if (!props.file?.path) {
            message.warning(`无地址，可供下载`)
            return;
        }
        await downloadBlobAsync(props.file?.path, props.file?.originalFileName, true)
    } catch (error: any) {
        message.error(error)
    } finally {
        state.downLoading = false
    }
}

defineExpose({
    openModal
})
</script>
<style>
#videoContainer {
    height: 500px;
    width: 100%;
    overflow: auto;
    .canvas {
        width: 80% !important;
        margin: 0 auto;
    }
}

.preview-btns-posi {
    position: absolute;
    top: 10px;
    right: 50px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138

/**下载文件 */
export const downloadBlobAsync = (blob: Blob | string, fileName: string, isUrl = false) => {
  return new Promise<void>((resolve, reject) => {
    try {
      //对于标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
      //IE10以上支持blob但是依然不支持download
      if ('download' in document.createElement('a')) {
        //支持a标签download的浏览器
        const link = document.createElement('a'); //创建a标签
        link.download = fileName; //a标签添加属性
        link.style.display = 'none';
        link.href = isUrl ? blob as string : URL.createObjectURL(blob as Blob);
        document.body.appendChild(link);
        link.click(); //执行下载
        URL.revokeObjectURL(link.href); //释放url
        document.body.removeChild(link); //释放标签
      } else {
        //其他浏览器
        (navigator as any)?.msSaveBlob(blob, fileName);
      }
    } catch (error) {
      console.log(error)
      reject(error);
    } finally {
      setTimeout(() => {
        resolve()
      }, 500)
    }
  })
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30