vue使用vue-pdf在线预览pdf文件

·  阅读 384

前言

最近遇到一个需求,需要在线预览和下载pdf文件,由于不同浏览器,直接打开pdf链接的方式,会有不同的结果,像谷歌和火狐浏览器,直接打开链接的话是预览,其他浏览器是直接下载。使用iframe方式的话,虽然能够直接预览,但是不支持分页。于是在网上找了个vue-pdf的插件。

安装

npm install vue-pdf --save
复制代码

使用

  • 方法一:分页预览
<template>
  <pdf 
    :page="pageNum"
    :src="pdfUrl"
    @progress="loadedRatio = $event"
    @num-pages="pageTotalNum = $event"
  ></pdf>
  
  <div class="pagination_box">
      <el-pagination
        background
        @current-change="handlePdfChange"
        :current-page="pageNum"
        :page-size="1"
        layout="prev, pager, next"
        :total="pageTotalNum"
      >
      </el-pagination>
    </div>
</template>

<script>
import pdf from 'vue-pdf'
export default {
	data() {
          return {
              pdfUrl: '测试.pdf',
              pageTotalNum: 1,
              pageNum: 1,
              loadedRatio: 0
          }
    },
    components: {
    	pdf
    },
    methods: {
    	handlePdfChange(val) {
        	this.pageNum = Number(val)
        }
    }
}
</script>
复制代码
  • 方法二:全部展示
<template>
  <pdf 
    :src="pdfUrl"
    v-for="(item, index) in pageTotalNum"
    :key="index"
    :page="item"
  ></pdf>
</template>

<script>
import pdf from 'vue-pdf'
export default {
	data() {
          return {
              pdfUrl: '测试.pdf',
              pageTotalNum: 10
          }
    },
    components: {
    	pdf
    },
    mounted() {
    	this.getAllPage()
    },
    methods: {
    	getAllPage() {
        	let task = pdf.createLoadingTask(this.pdfUrl)
         	task.promise.then(res=>{
            		this.pageTotalNum = res.numPages
         	})
         	.catch(err => console.log(err) )
        }
    }
}
</script>
复制代码

下载pdf文件

<template>
  <button @click="download">下载pdf</button>
</template>

<script>
export default {
  methods: {
    download() {
      const link = document.createElement('a')
      link.setAttribute('download', '下载后的文件名')
      link.setAttribute('href', 'pdf文件地址')
      link.style.display = "none"
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    }
  }
}
</script>
复制代码
分类:
前端
标签: