vue 实现pdf文件在线预览

一、使用vue-pdf

npm install --save vue-pdf

html 代码

<template>
    <div>
        <pdf ref="pdf" v-for="i in numPages" :key="i" :src="url" :page="i"></pdf>    
    </div>
</template>
<script>
import pdf from 'vue-pdf'
export default {  
    components:{      pdf  },  
    data(){      
        return {          
        url:"http://image.cache.timepack.cn/nodejs.pdf",          
        numPages: null, // pdf 总页数      
        }  
    },  
    mounted() {      
        this.getNumPages()  
    },  
    methods: {    
    // 计算pdf页码总数    
    getNumPages() {
        let loadingTask = pdf.createLoadingTask(this.url)
        loadingTask.promise.then(pdf => {
            this.numPages = pdf.numPages
        }).catch(err => {
            console.error('pdf 加载失败', err);
        })
    },
}
</script>

二、iframe标签

<template>
  <div class="pdfPriview">
      <iframe
        :src="pdfUrl"
        type="application/x-google-chrome-pdf"
        width="100%"
        frameborder="0"
        scrolling="auto"
        height="100%" />
  </div>
</template>

<script>
export default {
    data() {
        return {
            pdfUrl:'',
            numPages:null
        }
    },
    created(){
        // '#toolbar=0'把控制台隐藏
        this.pdfUrl = this.$route.query.pdfUrl+'#toolbar=0'
    },
}
</script>

<style lang="scss">
    .pdfPriview{
        height: 100%;
        overflow: hidden;
    }
</style>

其他通用文件在线预览的话使用这个 url为链接
let href = “view.officeapps.live.com/op/view.asp… +url
window.open(href, ‘_blank’);