vue-pdf在线预览PDF文件（包含文件本身水印）

情景：

在H5页面内写一个在线预览PDF的功能，但是需要支持预览文件本身的水印。之前写过类似的功能使用插件“pdfjs-dist”但是改来改去水印就是显示不出来，最后采用"vue-pdf"插件，虽然也支持但是我们可以改。

安装

cnpm install --save vue-pdf@4.2.0  //这里使用的版本是4.2.0 

使用

<template>
    <div>
        <pdf ref="pdf" :src="src">
        </pdf>
    </div>
</template>
<script>
    import pdf from 'vue-pdf'
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js' //引入水印依赖
    export default {
        components: {
            pdf
        },
        data() {
            return {
                src: pdf.createLoadingTask(
                    {
                        url: "",//pdf地址
                        CMapReaderFactory,
                    }
                ),
                path: "",//pdf地址和src.url是一样的值，单独定义一个变量是用来获取pdf总的页数
                numPages: null, // pdf 总页数
            }
        },
        mounted() {
            this.getNumPages();
        },
        methods: {
            getNumPages() {
                let loadingTask = pdf.createLoadingTask(this.path)
                loadingTask.promise.then(pdf => {
                    this.numPages = pdf.numPages
                }).catch(err => {
                    console.error('pdf 加载失败', err);
                })
            }
        },
    }
</script>