vue项目预览pdf 和word

word预览实质也是后端转换成pdf 图片的形式进行预览

第一步 ：下载依赖然后引入 组件

npm i  -S  'vue-pdf'  

 

第二步：文档中引入需要的dom文本

  <!-- PDF预览 -->

    <div class="maPdf">

      <div style="position: absolute; top: 8px; right: 20px">

        <el-button @click="closeBtn">关闭</el-button>

      </div>

      <div

        style="

          width: 80%;

          padding-bottom: 5px;

          background: #fff;

          position: absolute;

          bottom: 17px;

          left: 10%;

          text-align: center;

          z-index: 9999;

        "

      >

        <div>

          <el-button

            type="primary"

            icon="el-icon-arrow-left"

            @click="upPage"

          >上一页</el-button>

          <el-button

            style="background-color:#91A5E0;color: #fff;padding: 0 10px;height:33px;line-height33px;display:inline-block"

          >{{ pdfForm.page }}</el-button>

          <el-button type="primary" @click="dowPage">

            下一页

            <i class="el-icon-arrow-right el-icon--right" />

          </el-button>

          <span style="margin-left: 10px; color: #000">共&nbsp;&nbsp;{{ pdfForm.numPage }}&nbsp;&nbsp;页</span>

        </div>

      </div>

      <div style="width: 100%; height: calc(100% - 10px)" @click="closeBtn">

        <pdf

          :src="pdfForm.url"

          :page="pdfForm.page"

          class="pdfBody"

          style="

            width: 80%;

            height: calc(100% - 50px);

            margin: 0 auto;

            margin-top: 10px;

            overflow-y: auto;

          "

          @link-clicked="pdfForm.page = $event"

          @num-pages="numPages($event)"

        />

      </div>

    </div>

  </div>

第三步：在data里声明pdfForm

 pdfForm: {

        url: '',

        page: 1,

        numPage: 0

      },

第四步：点击预览触发函数

 preView(file) {

      this.boxLoading = true

      const token = getSession('token')

      this.pdfForm.page = 1

      document.getElementsByClassName('pdfBody')[0].scrollTop = 0

      this.$http

        .get(

          '/super-station-view/report/downLoadByPDF?id=' +

            file.id,

          {

            responseType: 'blob',

            headers: {

              'Content-Type': 'multipart/form-data',

              Authorization: token

            }

          }

        )

        .then((res) => {

          this.boxLoading = false

          const blob = new Blob([res.data], {

            type: 'application/pdf'

          })

          document.getElementsByClassName('maPdf')[0].style.display = 'block'

          this.pdfForm.url = this.getObjectURL(blob)

        })

    },

第五步：pdf组件里面的函数调用

 // pdf预览

    numPages(value) {

      // console.log(value, "我是页码数据");

      this.pdfForm.numPage = value

    },

    upPage() {

      if (this.pdfForm.page > 1) {

        this.pdfForm.page -= 1

        document.getElementsByClassName('pdfBody')[0].scrollTop = 0

      }

    },

    dowPage() {

      if (this.pdfForm.page < this.pdfForm.numPage) {

        this.pdfForm.page += 1

        document.getElementsByClassName('pdfBody')[0].scrollTop = 0

      }

    },

    closeBtn() {

      document.getElementsByClassName('maPdf')[0].style.display = 'none'

    }