pdf 上传和预览

要实现以上效果：


import { Field } from 'vant';

Vue.use(Field);

<van-field name="uploader" label="文件上传">

  <template #input>

    <van-uploader :max-count="1" :after-read="afterRead" v-model="uploader" accept=".pdf">

      <van-button icon="plus" type="primary" color="#00A2FF">上传文件</van-button>  <!--蓝色的自定义的样式-->

    </van-uploader>

  </template>

</van-field>


在data里面：

uploader:[],

fileId ："",

methods 方面里面：

afterRead(file) {

  /*this.uploader[0].content*/          //base64 的pdf 二进制码

  this.uploadLibraryFile(this.uploader[0].content);

},


/*上传pdf的接口*/

uploadLibraryFile(pdfBase64){

  api
    .uploadLibraryFile({

      file: pdfBase64,
      type: "pdf",

    })
    .then((res) => {

      if (res.code == 200) {

        this.overlayShow = false ;  /*遮道层消失*/

        this.=  res.data.fileId;  /*返回的fileId*/


      } else {

        Toast.fail(res.message);

        this.overlayShow = false ;  ///*遮道层消失*/

      }
    });


},

addFile(){

  if (this.pdfNodes.length == 0){

        if (this.fileName == "" || this.fileName.match(/^s*$/) ){

          Toast.fail('文件名称不能为空');

          return;

        };


        if (this.uploader.length == 0 ){

          Toast.fail('请上传文件');

          return;

        };

  }



  this.overlayShow = true ;  /*开始出现遮道层*/


  /*接口已经改好，无需调整*/

    api
     .addMenu({

          fileId: this.fileId ,
          menuName: this.fileName,
          parentMenuId: this.thirdMenuId,   //父级ID
         /* type: this.type   //父级ID*/

     })
     .then((res) => {

       if (res.code == 200) {

         this.overlayShow = false ;  /*遮道层消失*/

         Toast.success('新增成功');

         this.$router.push({

           name: 'productDescriptionForthClass',
           params: {

             type: this.type,
             firstMenu: this.firstMenu,
             secondMenuId: this.secondMenuId,
             thirdMenuId: this.thirdMenuId,
             thirdMName: this.thirdMName,

           }

         })



       } else {

         Toast.fail(res.message);

         this.overlayShow = false ;  ///*遮道层消失*/

       }
     });


},



//pdf 实现预览的效果：
通过pdf,js 实现

第一步：下载 http://mozilla.github.io/pdf.js/getting_started/#download
下载稳定版：
把下载文件放到static静态资源下面：build & web 两个文件夹

<template>

<div class="wrap">

  <iframe :src="pSrc" width="100%" height="100%"></iframe>

</div>

</template>

data:

pSrc:'',

 mounted () {

    this.loadPDF();
    //监听返回键
   

},

methods:

loadPDF () {

  //baseurl ：pdf存放的文件路径，可以是本地的，也可以是远程，这个是远程的，亲测可以用

 /* let baseurl = 'https://assettest.hzncc.cn/HncWeb/group1/M00/19/F6/CgEUdV8Nm5KALOf0AAM_XOvHKIY664.pdf';*/

  //ie有缓存加个随机数解决 + '?r=' + new Date()
  let pSrc = this.baseurl + '?r=' + new Date();

  this.pSrc = '../../../static/web/viewer.html?file=' + encodeURIComponent(pSrc) + '.pdf';
},

<style scoped>
  .wrap{
    position: fixed;
    top: 46px;  /*由于有navbar 所以设置top 的高度，高度很重要*/
    left: 0;
     100%;
    bottom: 0;
  }
</style>