vue-pdf 移动端浏览器兼容查看pdf

vue-pdf 移动端浏览器兼容查看pdf

官网：官网示例链接vue-pdf
注：中文乱码问题，如果引用了CMapReaderFactory 还是乱码，就证明需要更换浏览器（如：QQ浏览器），该浏览器可能与vue2不兼容，官网描述 ↓↓↓↓↓

npm i vue-pdf 安装依赖

	<script>
	//引入组价
    import pdf from "vue-pdf";
    //解决中文乱码
    import CMapReaderFactory from 'vue-pdf/src/CMapReaderFactory.js'

    export default {
        name: "laws",

        components: {
            pdf,
        },
        data() {
            return {
                height: 0,
                numPages: 0,//总页数
                src: "",//路径
                pageIndex: 0,//当前页
                loading: true,
                showpdf: false,
                tabData: [
                    {
                        label: "..",
                        pdfdata: [],
                        name: "..",
                    },
                ],
            };
        },
        methods: {
            //点击切换
            change(data) {
                this.loading = true
                this.showpdf = true
                this.loadPdf(data.path)
            },
            //拿到处理后的pdf 默认当前第一页，若pdf页数过多时，全部加载会导致浏览器崩溃，最好做成分页
            loadPdf(url) {
                this.src = pdf.createLoadingTask({url: url, CMapReaderFactory});
                // this.src.promise.then((pdf) => {
                //     this.numPages = pdf.numPages; // 这里拿到当前pdf总页数-->该方法不建议使用-->使用@num-pages就能拿到pdf总页数
                // });
                this.pageIndex = 1
            },
            //上一页
            preIndex() {
                if (this.pageIndex == 1) return
                this.pageIndex--
            },
            //下一页
            nextIndex() {
                if (this.pageIndex == this.numPages) return
                this.pageIndex++
            },
            //下面的不重要
            changecol(name) {
                this.src = ""
                this.pageIndex = 0
            },
            async getData() {
                let res = await this.$curl.get("..");
                if (res.state) {
                    let data = res.data;
                    this.tabData= data
                }
            },
        },
        mounted() {
            this.getData();
        },

<!-- @click="change(pdf)" 传入文件名和src-->
 		<div class="title" style="" @click="change(pdf)">{{pdf.name}}
 		<span style="margin-left:5px;color:#AD3FBF">>点击查看</span></div>

		.....
		<Modal v-model="showpdf">
            <div class="pdf">
                <pdf :src="src" :page="pageIndex"  @page-loaded="loading=false,pageIndex=$event" @num-pages="numPages=$event"/>
            </div>
            <div slot="footer">
                <span style="float: left">当前页：{{pageIndex}} <span style="padding-left: 8px">共{{numPages}}页</span></span>
                <ButtonGroup v-if="pageIndex>0">
                    <Button type="primary" @click="preIndex">
                        <Icon type="ios-arrow-back"></Icon>
                        上一页
                    </Button>
                    <Button type="primary" @click="nextIndex">
                        下一页
                        <Icon type="ios-arrow-forward" ></Icon>
                    </Button>
                </ButtonGroup>
            </div>
        </Modal>