这可能是前端最简单实现文件预览方法了（iframe及vue-pdf实现pdf文件在线预览）

PDF预览

关于文件预览模式，在一些业务场景中会经常用得到，大文件的预览，一些协议文件的预览等等场景，那么如何实现文件格式在浏览器中打开呢，我这边提供以下几种思路

第一种：利用浏览器自带的预览pdf

采取iframe将pdf嵌入网页从而达到预览效果。

<iframe src="你的pdf地址" style="width:100%;height:100vh;border:none"></iframe>
    

第二种：使用插件vue-pdf 从而实现预览PDF文件

安装组件vue-pdf

在这里我附上vue-pdf的官方地址：www.npmjs.com/package/vue…

安装命令

yarn: yarn install vue-pdf

npm: npm install --save vue-pdf

1. pdf.vue 代码，只有一页的情况

<!--html-->
<pdf  :src="pdfSrc" ></pdf>

<!--js-->
import pdf from 'vue-pdf'
export default {
    components: {pdf},
    data () {
        return {
            src:'/static/1.pdf',// pdf文件地址
        }
    },
    created() {
        // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
        this.src= pdf.createLoadingTask({url:this.src})
    }
}

注意：文件要放在public文件夹下，不然会报错

原因：读取 PDF 文件时，路径不合法，导致读取不到文件； 在 vue-cli3 脚手架搭建的项目中，读取本地的 PDF 文件需要放到 public 文件夹中，在引用时，不能使用相对路径，且‘/’即表示 public 文件夹 (需略去 public)；

1. pdf.vue 代码，多页，放在一个页面滚动查看，类似浏览器查看pdf文件

当PDF文件出现多页时，会出现滚动条，具体实现看下面代码：

<template>
    <div class="pdf" v-show="fileType === 'pdf'">
      <pdf
        :src="src"
        v-for="i in pageCount"
        :key="i"
        :page="i"
      >
      </pdf>
    </div>
  </template>


<script>
    import pdf from 'vue-pdf'
    export default {
        components: {pdf},
        data () {
            return {
                currentPage: 1, // pdf文件页码
                pageCount: 4, // pdf文件总页数
                fileType: 'pdf', // 文件类型
                src:'/static/1.pdf',// pdf文件地址
            }
        },
        created() {
            // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            this.src= pdf.createLoadingTask({url:this.src})
        }
    }

</script>

写在最后

以上便是本次分享的全部内容，希望对你有所帮助^_^

到这里业务需求基本完成了,当然可能还会有一些细枝末节需要处理,后面发现的话会进行完善如果你有任何想法和疑问，欢迎留言～ 一起探讨

点赞收藏不迷路 谢谢支持