vue项目实现pdf本地预览和线上预览

原创已于 2023-06-01 11:41:09 修改 · 293 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#pdf

于 2023-03-17 00:17:59 首次发布

vue项目功能案例专栏收录该内容

1 篇文章

订阅专栏

文章介绍了如何在Vue项目中利用pdfjs库进行PDF预览。首先下载pdfjs并将其放在项目public目录下，然后通过创建iframe标签，设置src属性为pdfjs的viewer.html并传入PDF文件路径。对于本地预览，直接提供PDF文件路径；对于线上预览，需要从后端获取PDF文件地址。

下载pdfjs

首先下载pdfjs，http://mozilla.github.io/pdf.js/getting_started/#download

下载后的文件，可以在vue项目的public下新建一个文件夹（我这叫pdf），把下载解压好的文件放进文件夹里，要展示的PDF文件也一起放在public下

实现本地pdf预览

<template>
    <div>
        <h1>PDF</h1>
        <el-button type="primary" @click="previewPDF">预览PDF</el-button>

        <el-dialog
            title="预览"
            :visible.sync="dialogVisible"
            width="80%"
            :before-close="handleClose">
            <iframe
                class="pdf-viewer"
                :src="`/pdf/web/viewer.html?file=${pdfFileUrl}`"
            >
            </iframe>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button 
                    type="primary" 
                    @click="dialogVisible = false"
                 >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

说明 =>

:src="`/pdf/web/viewer.html?file=${pdfFileUrl}`"

/pdf/web/viewer.html ：为插件viewer.html的地址

pdfFileUrl：为需要预览的pdf文件的地址

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            pdfFileUrl: '', // pdf文件地址
        }
    },
    methods: {
        previewPDF() {
            this.dialogVisible = true
            let index = window.location.href.indexOf('#')
            let windowHref = window.location.href.substring(0, index - 1)

            this.pdfFileUrl = `${windowHref}/lizhi.pdf`
        },
    },
}
</script>

<style>
.pdf-viewer {
    width: 100%;
    height: 80vh;
}
::v-deep .el-dialog {
    border-radius: 6px;
}
</style>

线上预览

将this.pdfFileUrl 更改为后端返回的地址即可

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            pdfFileUrl: '', // pdf文件地址
        }
    },
    methods: {
        previewPDF() {
            //发起请求
            ...
            this.pdfFileUrl = `{{ 后端返回的pdf地址 }}`
        },
    },
}
</script>