前端 pdf 预览功能

vue-pdf

vue-pdf 只展示pdf内容 ，pdf相关功能需要 加入其他参数实现

vue-pdf 整体展示

这是我在没有webpack扩展/修改等的情况下使用Nuxt解决此问题的方法。适用于多页pdf。
通过npm安装

npm install -save vue-pdf

创建一个名为vue-pdf.js的插件：

import Vue from 'vue'
import pdf from "vue-pdf";

Vue.component('vue-pdf', pdf)

添加到nuxt.config.js：

plugins: [
  { src: '~/plugins/pdf.js', ssr: false },
],

build: {
    extend(config, ctx) {
      config.output.globalObject = 'this'
      config.module.rules.push(
        {
          test: /\.pdf$/,
          loader: 'url-loader'
        }
      )
  },
},  

在您的组件中，执行以下操作。
pdf 多页显示在一个页面

## nuxt使用客户端渲染 确保将模板代码包装在中。
<template>
    <client-only>
        <vue-pdf class="your-pdf-class" :src="pdfSrc" :page="1" @num-pages="pdfPageCount = $event"></vue-pdf>
        <div v-if="pdfPageCount > 1">
            <div v-for="(pageNum, index) in pdfPageCount " :key="index">
                <vue-pdf class="your-pdf-class" :src="pdfSrc" :page="pageNum" v-if="pageNum > 1"></vue-pdf>
            </div>
        </div>
    </client-only>
</template>

export default {
    data() {
	return {
	    pdfSrc: '/path-to-your-pdf',
	    pdfPageCount : 0,
	}
    }
}

整页显示方式二：

<vue-pdf  :src="pdfUrl"></vue-pdf> 
<vue-pdf :src="pdfUrl"  v-for="i in numPages"
:key="i"
:page="i"></vue-pdf>   


<script>
 data(){
  return{
     numPages:0,
     vuePdf: null
   }
 },
created() {
 if (process.client) {
      this.vuePdf = require('vue-pdf')
      this.pdfLoadTask() 
    }
},
methods: {
	pdfLoadTask () {
	 this.pdfUrl = this.vuePdf.default.createLoadingTask(pdfUrl)
	 this.pdfUrl.promise.then(pdf => {
	    this.numPages = pdf.numPages;
	 })
	},
}
</script>

vue-pdf 分页展示

vue中使用vue-pdf插件显示pdf - 世界之魂 - 博客园

使用 html5标签显示

除ie浏览器和360安全浏览器 其他浏览器基本都兼容

<client-only>  
    <div v-if="isIe == -1">
        <embed  :src="pdfUrl" width="100%"    style="min-height: 640px;">  
    </div>
    <div v-else-if="isIe > 0">
        点击此处查看报告: <a :href="pdfUrl" target="_black"> {{pdfUrl}} </a>
    </div>
</client-only>
<script>
computed: {
      isIe() {
        if(!process.client) {
          return -2
        }

        var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串  
        var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; //判断是否IE<11浏览器  
        var isEdge = userAgent.indexOf("Edge") > -1 && !isIE; //判断是否IE的Edge浏览器  
        var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1;
        if(isIE) {
            var reIE = new RegExp("MSIE (\\d+\\.\\d+);");
            reIE.test(userAgent);
            var fIEVersion = parseFloat(RegExp["$1"]);
            if(fIEVersion == 7) {
                return 7;
            } else if(fIEVersion == 8) {
                return 8;
            } else if(fIEVersion == 9) {
                return 9;
            } else if(fIEVersion == 10) {
                return 10;
            } else {
                return 6;//IE版本<=7
            }   
        } else if(isEdge) {
            return 'edge';//edge
        } else if(isIE11) {
            return 11; //IE11  
        }else{
            return -1;//不是ie浏览器
        }
      }
    },

</script>

参考

Nuxt的工作示例·第148期·FranckFreiburger / vue-pdf
Vue PDF文件预览vue-pdf - 潇湘羽西 - 博客园
vue 使用 vue-pdf 实现pdf在线预览 - 义美-小义 - 博客园
vue中使用vue-pdf插件显示pdf - 世界之魂 - 博客园