dev/dcp-web-gate/src_old/views/countryInformation/pdfPreview.vue

<template>
    <div v-show="pdf.show">
        <!--pdf展示-->
        <div style="padding: 0 5%; box-sizing: border-box;">
            <div id="mycanvas" ref="mycanvas" style="text-align: center"></div>
        </div>
        <div style="text-align: center;padding-top: 30px;">
            <div v-show="page.currentPage==visiblePage && isLogin==false && page.currentPage!=page.totalPage" style="width: 100%;height: 100%">
                <span style="font-size: 20px;font-weight: 700">{{$t('common.resourceDetailsTryRead')}}</span>
                <div style="width: 190px;height: 37px;background-color: rgba(24, 144, 255, 1);margin: 15px auto;cursor: pointer;" @click="toViewLogin=true">
                    <span style="font-size: 18px;font-weight: 400;color: #FFFFFF;line-height: 38px;" >{{$t('common.resourceLogIn')}}</span>
                </div>
            </div>
        </div>
        <!--分页-->
        <div style="position: relative;width:100%;height: 60px;text-align: center;padding-top: 20px;">
            <div style="display: inline-block;width:154px; height: 100%;text-align: center;position: relative;"
                 class="bottomPage">
                <button
                    style="display: inline-block;width: 32px;height: 32px;background-color: white;border: 1px solid #ddd;position: absolute;top: 0;left: 0;cursor: pointer"
                    @click="handleCurrentChangeLeft"><
                </button>
                <div
                    style="display: inline-block;border: 1px solid #ddd;width: 86px;height: 30px;line-height: 30px;position: absolute;top: 0;left: 33px;">
                    <span style="display: inline-block;width: 23px;height: 23px;">
                                <input type="text" v-model="page.inputPage" @change="inputPageChange"
                                       style="width: 23px;height: 23px;border: none;padding: 0;background-color: #0091FF;text-align: center;line-height: 23px;border-radius: 6px;color: white"></input>
                            </span>
                    <span
                        style="display: inline-block;width: 23px;height: 23px;text-align: center;line-height: 23px;">/</span>
                    <span style="display: inline-block;width: 23px;height: 23px;text-align: center;line-height: 23px;">{{ page.totalPage }}</span>
                </div>
                <button
                    style="display: inline-block;width: 32px;height: 32px;background-color: white;border: 1px solid #ddd;position: absolute;top: 0;left: 121px;cursor: pointer"
                    @click="handleCurrentChangeRight">>
                </button>
            </div>
        </div>
        <LoginMusk :toViewLogin="toViewLogin" @LoginBack="LoginBack"></LoginMusk>
    </div>
</template>

<script>
import pdf from "../../../public/pdf/build/pdf"
import LoginMusk from '@/components/LoginMusk'
export default {
    name: "pdfPreview",
    props: {
        visible: Boolean,
        url: String
    },
    components:{
        LoginMusk
    },
    data () {
        return {
            page: {
                currentPage: 1,//当前页
                totalPage: '',//页数
                pageSize: 1,
                inputPage: 1,
            },
            pdf: {
                pdfDoc: null,
                canvasDom: null,
                show:false
            },
            visiblePage: 3,
            isLogin:false,
            toViewLogin:false
        }
    },
    mounted () {
        if(this.$Cookies.get('token')){
            this.isLogin = true;
        }else{
            this.isLogin = false;
        }
    },
    watch: {
        'url'(oldValue,newValue){
            console.log(oldValue)
            console.log(newValue)
            this.queryFile().then((sta)=>{
                if(sta){
                    this.pdf.show = true
                    this.getUrl()
                }
            })
        }
    },
    methods: {
        async queryFile(){
            var xmlhttp;
            if(window.XMLHttpRequest)
            {
                xmlhttp = new XMLHttpRequest();//其他浏览器
            }
            else if (window.ActiveXObject)
            {
                try {
                    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");//旧版IE
                }
                catch (e) { }
                try {
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//新版IE
                }
                catch (e) { }
                if (!xmlhttp) {
                }
            }
            let url = this.url
            xmlhttp.open("GET",url,false);
            xmlhttp.send();

            if(xmlhttp.readyState==4){
                if(xmlhttp.status==200)
                    return true
                else
                    return false
            }
        },
        getUrl () {
            if(this.url){
                this.getPdf(this.url)
            }
        },
        getPdf (url) {
            this.$refs.mycanvas.scrollTop = 0
            let pdfjsLib = pdf
            pdfjsLib.GlobalWorkerOptions.workerSrc = '../../../public/pdf/build/pdf.worker.js'
            let loadingTask = pdfjsLib.getDocument(url)
            loadingTask.promise.then((pdf) => {
                this.page.totalPage = pdf.numPages
                if(this.isLogin){
                    this.visiblePage = this.page.totalPage
                }
                this.pdf.pdfDoc = pdf
                this.pdf.canvasDom = document.getElementById('mycanvas')
                this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
            }, function (reason) {
                alert(reason)
            });
        },
        getPage (pdf, pageNumber, container, numPages) { //获取pdf
            pdf.getPage(pageNumber).then((page) => {

                // let scale = (container.offsetWidth / page.view[3])
                let scale = 1;
                let viewport = page.getViewport({scale: scale})
                let canvas = document.createElement("canvas")
                canvas.width = viewport.width
                canvas.height = viewport.height
                container.appendChild(canvas)
                let ctx = canvas.getContext('2d');
                let renderContext = {
                    canvasContext: ctx,
                    transform: [1, 0, 0, 1, 0, 0],
                    viewport: viewport,
                    intent: 'print'
                };
                page.render(renderContext)
            })
        },
        handleCurrentChangeLeft () {
            const that = this;
            if (that.page.currentPage > 1) {
                --that.page.currentPage
                --that.page.inputPage
                this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
                this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
            }
        },
        handleCurrentChangeRight () {
            const that = this;
            if (that.page.currentPage < that.page.totalPage && that.page.currentPage < that.visiblePage) {
                ++that.page.currentPage
                ++that.page.inputPage
                this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
                this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
            }
        },
        inputPageChange () {
            // console.log(parseInt(this.page.inputPage) < parseInt(this.visiblePage))
            // console.log(0 < parseInt(this.page.inputPage) < parseInt(this.visiblePage))
            if (parseInt(this.page.inputPage) < 0) {
                this.page.inputPage = 0;
            }
            if (parseInt(this.page.inputPage) < parseInt(this.visiblePage)) {
                this.page.currentPage = parseInt(this.page.inputPage);
            } else {
                this.page.inputPage = this.visiblePage;
                this.page.currentPage = this.visiblePage;
            }
            this.pdf.canvasDom.removeChild(this.pdf.canvasDom.childNodes[0])
            this.getPage(this.pdf.pdfDoc, this.page.currentPage, this.pdf.canvasDom, this.page.totalPage)
        },
        LoginBack (data) {
            this.toViewLogin = false;
        },
    }
}
</script>

<style scoped>
.bottomPage button:active {
    border-color: #0ab8ed;
    outline: 1px solid #0ab8ed;
}

.bottomPage button:focus {
    border-color: #0ab8ed;
    outline: 1px solid #0ab8ed;
}

.bottomPage input:focus {
    outline: none;
    border: none;
    box-shadow: none;
}
</style>