前端非联网（内网）展示base64.pdf文件预览

最新推荐文章于 2024-07-02 13:32:15 发布

兔子爱萝卜@

最新推荐文章于 2024-07-02 13:32:15 发布

阅读量556

点赞数 5

文章标签： pdf vue.js

本文链接：https://blog.csdn.net/FG_1314/article/details/136725844

版权

本人与2024/03/15日0:44:10分编写。

本身之前使用关于 vue-pdf 组件，也在网络上搜索过大量的大神文章，后一无所获，主要都是联网的情况，但是对于部分非联网的情况（内网）就没有办法使用，希望下面的内容能为你带来工作的便于，废话不多说了上代码！！！！

pdfViews.vue

<template>
    <div>
        <div>

            <body>
                <input type="file" id="myfile">
            </body>
        </div>
        <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: "",
            numPage: 0,
            // cmaps:require("./cmaps")
        }
    },
    mounted() {
        let str = "JVBERi0xLjQKJeLjz9MKMiAwIG9iaiA8PC9MZW5ndGggNzUzL0ZpbHRlci9GbGF0ZURlY29kZT4+c3RyZWFtCnicrZY/TxRBGIcXEy220d5mQgUF47zzf7EzUYyFkeMSTSSnggfGSAGKxMrSGDDQSExMSCz8EnZ+DS2s/AAmRhIbfOd218DtvHO3BMgdl/3NPvvsb2bnWM+vdXNlmReWdR/ngs2A9eHT9W4+n68PXpLdwmAuF9ywrdx7rpjTlknDJZOCbfTzhSoDUPg3hNpw5YZT47l3g9gabtRQLKXmGujYF7zQZKyM4bqEgwEuh/NSW/pSG3xEG8NSeyittDEuL3wyrrWpuNIm4lob40r7ZF5qg0hoY5jSxjilTcWVNhHX2hjT2raQtHYIE9ohTmiTcalNxZV2iBPaTie0MUxpY5zSpuJKm4hrbYwT2sYmtI1Nahub1KbiSpuIa21jU9oq8UiGMKWtko8kGVfaRFxrq8YjOR82S2ACf4HJcC5zHnfLtfzKDWCAO+gKbpbdjQBS+IOwqUcX3359Nvfw6nT3KW6imAEexc31GKkQvGDOwH+QOAZSNai3u3CYgABYDmNg7n9aenX7S/deCuWAWz0a1bnc+9v/8/53AiWV4+BGo5Y/9+0IlBKSj0EK9zeCpAG4GLOqMH2pqcN1KJlTEpdCxSoCaiqDcNZQr1JyW8RG799cuvThW+QMC1xBlC8zkUHmsxl8l/guM50xPOayWfxUNFlSWu7NGbEKyfHxOBNWVSHoJipWoRus8ubo59urv+gCY/TTFtiC5ZGlMk8X2JoV8VIWt8poJ9uH/TdrH8XE67t3Fqf3z2/97L1892P3+9Hiys7kzuTRBDUZtrANLUVORmT04ILkbMTwre+6mo02rAJZkFjObVmYNVla+DAbEdbe5vpq5+DFBXGO7N35hoAm95HI6FUIE04XH+GfuvgWrGLAiqyguvizYGlwg+KbrL3NzkGidCsaFzf0Ym+OTu48MXr7mqrKW7MSa70lS0fXOv6TJqKdbB8+6DxZTpSum98cll7pzdEjvjFj/Na3V9c+Ngvw6Cy+Is9sXfupWf8AJ3cIwAplbmRzdHJlYW0KZW5kb2JqCjQgMCBvYmo8PC9QYXJlbnQgMyAwIFIvQ29udGVudHMgMiAwIFIvVHlwZS9QYWdlL1Jlc291cmNlczw8L1Byb2NTZXQgWy9QREYgL1RleHQgL0ltYWdlQiAvSW1hZ2VDIC9JbWFnZUldL0ZvbnQ8PC9GMSAxIDAgUj4+Pj4vTWVkaWFCb3hbMCAwIDU5NSA4NDJdPj4KZW5kb2JqCjUgMCBvYmo8PC9Gb250QkJveCBbLTI1IC0yNTQgMTAwMCA4ODBdL0NhcEhlaWdodCA4ODAvU3R5bGU8PC9QYW5vc2UoAQUCAgQAAAAAAAAAKT4+L1R5cGUvRm9udERlc2NyaXB0b3IvU3RlbVYgOTMvRGVzY2VudCAtMTIwL0ZsYWdzIDYvRm9udE5hbWUvU1RTb25nLUxpZ2h0L0FzY2VudCA4ODAvSXRhbGljQW5nbGUgMD4+CmVuZG9iago2IDAgb2JqPDwvQmFzZUZvbnQvU1RTb25nLUxpZ2h0L0NJRFN5c3RlbUluZm88PC9PcmRlcmluZyhHQjEpL1JlZ2lzdHJ5KEFkb2JlKS9TdXBwbGVtZW50IDQ+Pi9XIFsxWzIwN10xNFszNzVdMTcgMjYgNDYyIDI3WzIzOF1dL1R5cGUvRm9udC9TdWJ0eXBlL0NJREZvbnRUeXBlMC9Gb250RGVzY3JpcHRvciA1IDAgUi9EVyAxMDAwPj4KZW5kb2JqCjEgMCBvYmo8PC9EZXNjZW5kYW50Rm9udHNbNiAwIFJdL0Jhc2VGb250L1NUU29uZy1MaWdodC1VbmlHQi1VQ1MyLUgvVHlwZS9Gb250L0VuY29kaW5nL1VuaUdCLVVDUzItSC9TdWJ0eXBlL1R5cGUwPj4KZW5kb2JqCjMgMCBvYmo8PC9UeXBlL1BhZ2VzL0NvdW50IDEvS2lkc1s0IDAgUl0+PgplbmRvYmoKNyAwIG9iajw8L1R5cGUvQ2F0YWxvZy9QYWdlcyAzIDAgUj4+CmVuZG9iago4IDAgb2JqPDwvUHJvZHVjZXIoaVRleHQgMi4wLjcgXChieSBsb3dhZ2llLmNvbVwpKS9Nb2REYXRlKEQ6MjAyMTA2MzAwOTU1NDkrMDgnMDAnKS9DcmVhdGlvbkRhdGUoRDoyMDIxMDYzMDA5NTU0OSswOCcwMCcpPj4KZW5kb2JqCnhyZWYKMCA5CjAwMDAwMDAwMDAgNjU1MzUgZiAKMDAwMDAwMTM3OCAwMDAwMCBuIAowMDAwMDAwMDE1IDAwMDAwIG4gCjAwMDAwMDE1MDEgMDAwMDAgbiAKMDAwMDAwMDgzNSAwMDAwMCBuIAowMDAwMDAwOTkxIDAwMDAwIG4gCjAwMDAwMDExODEgMDAwMDAgbiAKMDAwMDAwMTU1MSAwMDAwMCBuIAowMDAwMDAxNTk1IDAwMDAwIG4gCnRyYWlsZXIKPDwvUm9vdCA3IDAgUi9JRCBbPDk5MGVjNjU1ZDZhODIzODRlYWFlODBkY2FhNzRiNjNiPjwyNDRjNjQ1Yzc5NWRkZWQ5MmI1NTM2MzViNGE3NmY2Zj5dL0luZm8gOCAwIFIvU2l6ZSA5Pj4Kc3RhcnR4cmVmCjE3MjYKJSVFT0YK"

        this.$nextTick(callback => {

            this.getBase64pdf(str)
        })

        // 本地文件预览
        window.onload = function () {
            const myfile = document.getElementById("myfile");
            myfile.addEventListener("change", function () {
                const file = this.files[0];   //文件流数据
                const url = URL.createObjectURL(file);   //将文件转为路径
                // ./pdf/web/viewer.html 一定找对文件夹
                // window.open("./pdf/web/viewer.html?file=" + url + "&.pdf");


                // const blob = new Blob([data], {   //data 服务器返回的二进制数据流
                //     type: "application/pdf"
                // });
                // const url = URL.createObjectURL(blob);   //将文件转为路径
                // // ./pdf/web/viewer.html 一定找对文件夹
                // window.open("./pdf/web/viewer.html?file=" + url + "&.pdf");
            })
        }
    },
    methods: {
        //可以联网时的写法：
        // getBase64pdf(fileBase64) {
        //     let datas = "data:application/pdf;base64," + fileBase64;
        //     let src = pdf.createLoadingTask({ url: datas, cMapPacked: true, cMapUrl: 'https://cdn.jsdelivr.net/npm/pdfjs-dist@2.5.207/cmaps/' })
        //     console.log(this.srcsrc, 111);
        //     src.promise.then(pdf => {
        //         console.log(src);
        //         this.src = src;
        //         this.numPage = pdf.numPage;
        //     })
        // },

        //直接断网写法，引入本地项目资源
        getBase64pdf(fileBase64) {
            let datas = "data:application/pdf;base64," + fileBase64;
            let src = pdf.createLoadingTask({ url: datas, 
                cMapPacked: true, 
                // cMapUrl: "https://unpkg.com/pdfjs-dist@3.8.162/cmaps/",//联网使用
                cMapUrl: "./cmaps/",//非联网使用
                lazy:false,
            })
            console.log(this.srcsrc, 111);
            src.promise.then(pdf => {
                console.log(src);
                this.src = src;
                this.numPage = pdf.numPage;
            })
        }
    },

}
</script>

package.json

{
  "name": "my-code",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "@jiaminghi/data-view": "^2.10.0",
    "core-js": "^3.8.3",
    "echarts": "^5.4.3",
    "element-ui": "^2.15.9",
    "jquery": "^3.6.1",
    "pdfjs-dist": "^2.5.207",
    "vue": "^2.6.14",
    "vue-pdf": "^4.3.0",
    "vue-router": "^3.5.1",
    "vuex": "^3.6.2",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-router": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "sass": "^1.54.9",
    "sass-loader": "^7.3.0",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.74.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

"pdfjs-dist": "^2.5.207",// 这个版本很关键，注意一下。

"vue-pdf": "^4.3.0", //这个没有太大的注意

注意下载号的依赖文件，复制cmaps 到你编写的当前的文件的目录下。