在实战之前，你需要对vuejs的基础语法有一定的了解，可以通过以下几个途径进行学习：
 
vue.js官方文档：https://cn.vuejs.org/v2/guide/index.html
 
官方的文档内容比较多且杂，对于初学者来说可能没有系统性的引导，可以查看明灯小站的基础教程，对一些常用的基础语法都进行了整理，还可以在线进行调试。
 
好了，如果你对基础语法有一定的了解了，那就可以开始我们的实战项目了，这次我们要做的是一个简单的webapp，课程中会使用原生的vuejs语法，有非常详细的解释，对于小白用户来说，可以轻松掌握。
 
正式开始之前，可能你还需要对flex布局有一定的了解，可以查看阮一峰大神的两个教程，也非常简单。
 
Flex 布局教程：语法篇
 
Flex 布局教程：实例篇
 
Demo实例
 
整理更新中······
 
 
电子版请扫二维码
 
 
 
 
1：本文档仅供学习之用
 
2：看完应立即删除
 
3：不能私下传播

一、后端返回pdf文件(url:http:xxx.pdf)时
 
引入库
 
代码如下（示例）：
 
npm install --save vue-pdf
 
1.页面使用
 
代码如下（示例）：
 
 <div>
	<pdf  ref="pdf" :src="url"></pdf>
 </div>
 
<script>
import { Loading } from "element-ui";
import pdf from 'vue-pdf'
export default {
  components:{
      pdf
  },
  data(){
    return {
       url:"http://xxxx.pdf",
     }
  }
</script>
 
提示：以上只能预览到文件第一页.
 
 
2、预览多页
 
 <pdf 
   ref="pdf"
   v-for="i in pdfPages"
   :key="i"
   :src="pdfUrl"
   :page="i">
 </pdf>
 
<script>
import pdf from 'vue-pdf'
let loading;
export default {
  components:{
      pdf
  },
  data(){
    return {
       pdfUrl:pdf.createLoadingTask("http://xxxxx.pdf"),
       pdfPages: null, // pdf 总页数
     }
  },
  mounted() {
     this.getPdfPages()
  },
  methods: {
    getPdfPages() {
	   loading = Loading.service({//element加载loading
	      lock: true,
	      text: "PDF文件加载中...",
	      background: "rgba(0, 0, 0, 0)",
	    });
      pdfUrl.promise.then(pdf => {
        this.pdfPages= pdf.numPages
        loading.close();//关闭loading
      }).catch(err => {
        loading.close();//关闭loading
      })
    },
  }
</script>
 
 
二、后端返回流文件(url不是pdf结尾)时
 
 <pdf 
   ref="pdf"
   v-for="i in pdfPages"
     :key="i"
     :src="src"
     :page="i">
 </pdf>
 
<script>
import { Loading } from "element-ui";
import pdf from 'vue-pdf'
import Axios from "axios";
let loading;
export default {
  components:{
      pdf
  },
  data(){
    return {
       src:'',
       pdfPages: null, // pdf 总页数
     }
  },
  
  created() {
    loading = Loading.service({
      lock: true,
      text: "PDF文件加载中...",
      background: "rgba(0, 0, 0, 0)",
    });
    this.getPdfCode ()
  }
  
  methods: {
       // 初始化获取pdf文件
	  getPdfCode () {
	    let that = this;
	    Axios({
	      method: 'get',
	      url: this.doloadUrl,
	      headers: {
	        'Content-Type': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
	      },
	      responseType: 'blob'  //配置响应头
	    }).then(response => {
	      that.src  = that.getObjectURL(response.data);
	    }).catch(function (error) {
	      console.log(error);
	    });
	  }

	 // 将返回的流数据转换为url
	 getObjectURL(file) {
	   let url = null;
	   url = window.webkitURL.createObjectURL(file);
	   //多页
	   let pdfUrl=pdf.createLoadingTask(url)
	     pdfUrl.promise.then(pdf => {
	     this.pdfPages= pdf.numPages
	   }).catch(err => {
	     console.log(err);
	   })
	   loading.close();//关闭loading
	   return url;
	 }
 }
</script>
 
总结
 
提示：以上代码仅供参考
 
另:word文件预览请移步–>docx文件预览(docx-preview插件简单使用)

 
文章目录
 
01 Vue的基本概念
概念
Vue特点
搭建Vue开发环境
容器和实例是一一对应的
  
02 模板语法
03 数据绑定
04 el的两种写法
data的两种写法
对象式：在new Vue()对象中data直接赋值
函数式：
  
  
05 MVVM模型
06 Vue中的数据代理
07 事件处理
07_1. 事件的基本使用
07_2. 事件修饰符
07_3. 键盘事件
(1). 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
(2). 系统修饰键：
(3). .exact 修饰符
(4). 鼠标按钮修饰符：这些修饰符会限制处理函数仅响应特定的鼠标按钮
  
  
08. 计算属性: computed
09. 监视属性
深度监视
总结
watch和computed的对比
两个重要的小原则
  
  
10. Class与Style绑定
10_1. 绑定class样式
(1).绑定单个class
   
10_2. 绑定style样式
  
11. 条件渲染
(1). v-if
(2). v-else
(3). v-else-if
(4). v-show
(5). v-if vs v-show
  
12. 列表渲染
12_1. 基本用法
12_2. key的内部原理(react、vue的key有什么作用)
A. 虚拟DOM中key的作用：
B. 对比规则：
C. 用index作为key可能会引发的问题
D. 开发中如何选择key?
   
12_3. 列表过滤
12_4. 列表排序
 

 
01 Vue的基本概念
 
 
概念
 
  
Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。即是说这个框架可以用于简单到复杂的各种场景
开发者：尤雨溪
 
 
Vue特点
 
1.采用组件化模式，提高代码复用率、且让代码更好维护
 一个.vue文件就包括了html,css,js。编辑一个.vue文件，不会影响其他的.vue文件
 2.声明式编码，让编码人员无需直接操作DOM，提高开发效率
 命令式编程就像“您如何做某事，而声明式编程更像您在做什么
 Vue实现：数据 – 虚拟DOM – 页面真实DOM
 
 
搭建Vue开发环境
 
https://cn.vuejs.org/v2/guide/installation.html
 
 
容器和实例是一一对应的
 
JS表达式是一种特殊的JS代码，特殊在表达式会生成一个值
 JS表达式: yige表达式会生成一个值，可以放在任何一个需要值的地方
 
  
a
a + b
demo(1)
x === y ? a : b
 
 
{{XXX}}中，XXX是JS表达式，且XXX自动读取到该数据的所有属性
 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新
 
02 模板语法
 
插值语法： 
  
功能：用于解析标签体内容
写法：{{XXX}}，xxx是js表达式，且可以直接读取到data中的所有属性
 
指令语法： 
  
功能：用于解析标签(包括：标签属性、标签体内容、绑定事件···)
举例：v-bind:href=“xxx” 或简写为 ：href=“xxx”
PS:使用v-bind:后，会把值当成表达式进行处理。 v-bind : XXX 可以简写成 : XXX
 
 
03 数据绑定
 
v-bind: 单向数据绑定
v-model:双向数据绑定，只能用于表单类(输入类元素，具有value值的元素)元素 
  
v-model:value 可以简写成v-model
 
 
04 el的两种写法
 
 - 在new Vue()对象中el直接赋值
 - 通过$mount()函数进行绑定
 
 
data的两种写法
 
 
对象式：在new Vue()对象中data直接赋值
 
 
函数式：
 
 例 ：data : function() { return { name : 'XXX'} }
      data () { return { name : 'XXX'} }
 
 
PS ：由Vue管理的函数，一定不要写成箭头函数，一旦写成了箭头函数,this就不再是Vue的实例了。
 
 
05 MVVM模型
 
M：模型(Model)，对应data中的数据
V：视图(View)，模板
VM：视图模型，Vue实例对象
 
数据代理：通过一个对象代理对另一个对象中属性的操作
 Object.defineProperty(变量, 变量中的属性, {})
 例：
 
 let person = {
     name : 'xx',
     sex : 'boy'
 }
 Object.defineProperty(person, 'sex', {
     value : 18, 
     // 控制属性是否可以枚举，默认值false
     enumerable : true,
     // 控制属性是否可以被修改，默认值false
     writable : true, 
     // 控制属性是否可以被删除，默认值false
     configurable : true, 
     get(){},
     set(value){}
})
 
06 Vue中的数据代理
 
a. 通过Vue实例来代理data对象中的属性操作
b. 更加方便的操作data中的数据
c. 通过Object.defineProperty()把data对象中所有属性添加到vm上。
   为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作data中对应的属性。
 
07 事件处理
 
07_1. 事件的基本使用
 
a. 可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
 
<div id="example-2">
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
</div>
var example2 = new Vue({
    el: '#example-2',
    data: {
        name: 'Vue.js'
    },
    // 在 `methods` 对象中定义方法
    methods: {
        greet: function (event) {
            alert(event.target)
        }
    }
})
 
b. 也可以用 JavaScript 直接调用方法
 
example2.greet() // => 'Hello Vue.js!'
 
c. 内联处理器中的方法
 v-on:click 可以写成 @click
 @click=“demo” 和 @click=“demo(event)” 效果一致，后者可以传参
 html代码：
 
<div id="example-3">
    <button v-on:click="say('hi')">Say hi</button>
    <button v-on:click="say('what')">Say what</button>
</div>
 
javascript代码：
 
new Vue({
    el: '#example-3',
    methods: {
        say: function (message) {
            alert(message)
        }
    }
})
 
d. 有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法
 
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
	Submit
</button>
 
07_2. 事件修饰符
 
 
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
 
 
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
 
 
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
 
.stop
 .prevent
 .capture
 .self
 .once
 .passive
 
 
 <!-- 阻止单击事件继续传播 -->
 <a v-on:click.stop="doThis"></a>

 <!-- 提交事件不再重载页面 -->
 <form v-on:submit.prevent="onSubmit"></form>

 <!-- 修饰符可以串联 -->
 <a v-on:click.stop.prevent="doThat"></a>

 <!-- 只有修饰符 -->
 <form v-on:submit.prevent></form>

 <!-- 添加事件监听器时使用事件捕获模式 -->
 <!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
 <div v-on:click.capture="doThis">...</div>

 <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
 <!-- 即事件不是从内部元素触发的 -->
 <div v-on:click.self="doThat">...</div>

        
 
课间小插曲
 
@wheel：鼠标滚轮事件
@scroll：滚动条滚动事件
 
07_3. 键盘事件
 
(1). 在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
 
    .enter
    .tab (特殊，必须配合keydown使用)
    .delete (捕获“删除”和“退格”键)
    .esc
    .space
    .up
    .down
    .left
    .right
 
(2). 系统修饰键：
 
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
 .ctrl
 .alt
 .shift
 .meta
 
PS:
 
系统修饰键配合keyup使用：按下修饰键的同事，再按下其他键，随后释放其他键，事件才被触发。系统修饰键配合keydown使用：正常触发事件
Vue.config.keyCodes.自定义键名 = 键码，可以去定制按键别名
Vue未提供别名的按键，可以使用按键原始的Key值去绑定，但注意要转为kebab-case(短横线命名)
keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
 在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
 在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
 在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。
 在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
 
(3). .exact 修饰符
 
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
 
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
 
(4). 鼠标按钮修饰符：这些修饰符会限制处理函数仅响应特定的鼠标按钮
 
.left
 .right
 .middle
 
08. 计算属性: computed
 
定义：要用的属性不存在，要通过已有属性计算得来
原理：底层借助了Object.defineProperty方法提供的getter和setter。
get函数什么时候执行 
  
初次读取时会执行一次
当依赖的数据发生改变时会被再次调用
 
优势： 与methods实现相比，内部有缓存机制(复用)，效率更高，调试方便
备注 
  
计算属性最终会出现在vm上，直接读取使用即可
如果计算属性被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生变化
 
 
例：
 
<body>
  <div id="root">
      <h1> {{ name }} </h1>
      <h1> {{ name2 }} </h1>
      <h1> {{ fullName }} </h1>
  </div>
  <script type="text/javascript">
      Vue.config.productionTip = false; // 阻止 vue 在启动时生产生产提示
      // 创建Vue实例
      const x = new Vue({
          el: '#root',
          data: {
              name: '张',
              name2 : '三',
          },
          computed : {
              // 完整形式
              fullName : {
                  get() {
                      return this.name + '-' + this.name2
                  },
                  // set什么时候调用？当fullName被修改时
                  // 
                  set(value) {
                      const arr = value.split('-')
                      this.name = arr[0]
                      this.name2 = arr[1]
                  }
              }
              // 只读不写时，可以使用简写形式
              fullName : {
                  // 实际上是使用的get函数
                  return this.name + '-' + this.name2
              }
          }
      })
  </script>
</body>
 
课间小插曲：Vue 3 Snippets插件：提供代码片段，语法高亮和格式化的 VS Code 插件，能极大提高你的开发效率。
 
09. 监视属性
 
(1). 当监视属性发生变化时，回调函数自动调用，进行相关操作
(2). 监视的属性必须存在，才能进行监视
(3). 监视的两种写法
    a. new Vue时传入watch配置
    b. 通过vm.$watch进行监视
 
例：
 
<body>
  <div id="root">
      <h1>今天天气很{{info}}</h1>
      <button @click="changeWeather">切换天气</button>
  </div>
  <script type="text/javascript">
      Vue.config.productionTip = false; // 阻止 vue 在启动时生产生产提示
      // 创建Vue实例
      const x = new Vue({
          el: '#root',
          data: {
              name: '张',
              name2 : '三',
          },
          computed : {
              info(){
                  return this.isHot ? '炎热' : '凉爽'
              }
          },
          methods : {
              changeWeather(event) {
                  this.isHot = !this.isHot
              }
          },
          // 方式一
          watch : {
              // 方式一正常写法
              isHot : {
                  immediate : true, // 初始化时让handler调用一下
                  // 什么时候调用？当Hot发生改变的时候
                  handler(newValue, oldValue) {
                      consle.log('xxx')
                  }
              },
              // 方式一简写
              isHot(newValue, oldValue){
                  consle.log('xxx')
              },
          }
      })

      // 方式二正常写法
      x.$watch('isHot', {
          immediate : true,
          handler(newValue, oldValue) {
              consle.log('xxx')
          }
      })
      // 方式二简写
      x.$watch('isHot', (newValue, oldValue) {
          consle.log('xxx')
      })
  </script>
</body>
 
深度监视
 
Vue中的watch默认不监测对象内部值的改变(一层)
配置deep:true可以监测对象内部的改变(多层)
Vue自身可以监测内部值的改变，但Vue提供的watch默认不可以！
使用watch时根据数据的具体结构，决定是否采用深度监视
 
例：
 
<body>
   <div id="root">
       <h3>a的值是{{info}}</h3>
       <button @click="numbers.a++">点我让a+1</button>
       <h3>b的值是{{info}}</h3>
       <button @click="numbers.b++">点我让b+1</button>
   </div>
   <script type="text/javascript">
       Vue.config.productionTip = false; // 阻止 vue 在启动时生产生产提示
       // 创建Vue实例
       const x = new Vue({
           el: '#root',
           data: {
               numbers : {
                   a:1,
                   b:1
               }
           },
           watch : {
               // 监视多级结构中的某个属性的变化
               /* 'numbers.a': {
                       handler(){

                       }
                   }, */
               number:{
                   // 可以监测对象内部的改变
                   deep:true,
                   handler(){
                       
                   }
               }
           }
       })
   </script>
</body>
 
总结
 
watch和computed的对比
 
computed能完成的功能，watch都能完成
watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作
 
两个重要的小原则
 
所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或者组件实例对象
所有不被Vue管理的函数(定时器的回调函数、aja的回调函数等)，最好写成箭头函数，这样this的指向才是vm或组件实例对象
 
10. Class与Style绑定
 
 
10_1. 绑定class样式
 
  
字符串写法：适用于class的类名不固定，需要动态生成
数组写法：适用于要绑定的样式个数不确定，名字也不确定
对象写法：适用于要绑定的样式个数确定、名字也确定，但动态决定要不要使用
 
(1).绑定单个class
 
html部分：
 
 
<div :class="{'active':isActive}"></div>
 
js部分：判断是否绑定一个active
 
data() {
   return {
   isActive: true
   };
}
 
结果渲染为：
 
<div class="active"></div>
 
(2).若要绑定多个class，需要逗号隔开就行：（这里的activeTwo加不加引号都可以，也一样都能渲染，如下）
 
<div class="activeOne" v-bind:class="{ activeTwo: isActive, 'activeThree': hasError }"></div>
 
js部分：判断是否绑定对应class
 
data() {
    return {
    isActive: true,
    hasError: true
    };
}
 
结果渲染为：
 
<div class="activeOne activeTwo activeThree"></div>
 
(3).数组语法
 
<div :class="[activeClass, errorClass]"></div>
 
data() {
   return {
    activeClass: "active",
    errorClass: "disActive"
    };
},
 
结果渲染为：
 
<div class="active disActive"></div>
 
(4). 绑定的对象
 
<div :class="classObject"></div>
 
data: {
    classObject: {
        active: true,
    }
}
 
 
10_2. 绑定style样式
 (1). 在 v-bind:style 直接设置样式：
 
<div id="app">
       <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">XXX</div>
</div>
 
以上实例 div style 为：
 
<div style="color: green; font-size: 30px;">XXX</div>
 
(2). 也可以直接绑定到一个样式对象，让模板更清晰：
 
<div id="app">
    <div v-bind:style="styleObject">XXX</div>
</div>
 
(3). v-bind:style 可以使用数组将多个样式对象应用到一个元素上：baseStyles, overridingStyles是样式对象
 
<div id="app">
    <div v-bind:style="[baseStyles, overridingStyles]">XXX</div>
</div>
 
11. 条件渲染
 
(1). v-if
 
v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
 例：
 
<h1 v-if="awesome">Vue is awesome!</h1>
 
(2). v-else
 
也可以用 v-else 添加一个“else 块”：
 例：
 
<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no 😢</h1>
 
(3). v-else-if
 
顾名思义，充当 v-if 的“else-if 块”，可以连续使用：
 例：
 
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">B</div>
<div v-else-if="type === 'C'">C</div>
<div v-else>Not A/B/C</div>
 
PS: 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
 
(4). v-show
 
用于根据条件展示元素的选项是 v-show 指令。用法大致一样：
 例：
 
<h1 v-show="ok">Hello!</h1>
 
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS property display。
 
ps: v-show 不支持 元素，也不支持 v-else。
 
(5). v-if vs v-show
 
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show
 较好；如果在运行时条件很少改变，则使用 v-if 较好。
 
12. 列表渲染
 
12_1. 基本用法
 
我们可以用 v-for 指令基于一个数组来渲染一个列表。
v-for 指令需要使用 item in items 形式的特殊语法， 
  
其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。 index是当前项的索引
 
 
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>
var example2 = new Vue({
    el: '#example-2',
    data: {
        parentMessage: 'Parent',
        items: [
        { message: 'Foo' },
        { message: 'Bar' }
        ]
    }
})
 
   1. 用于展示列表数据
   2. 语法：v-for="(item, index) in xxx" :key="yyy"
   3. 可遍历：数组、对象、字符串(用得较少)、指定次数(用得较少)
 
12_2. key的内部原理(react、vue的key有什么作用)
 
A. 虚拟DOM中key的作用：
 
 
key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】，
 
 
随后Vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较，比较规则如下：
 
B. 对比规则：
 
 
旧虚拟DOM中找到了与新虚拟DOM相同的key
 
  
若虚拟DOM中内容没变，直接使用之前的真实DOM
若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM
 
 
旧虚拟DOM中未找到与新虚拟DOM相同的key
 
  
创建新的真实DOM，随后渲染到页面
 
 
C. 用index作为key可能会引发的问题
 
若对数据进行：逆序添加、逆序删除等破坏顺序操作时： 
  
会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低
 
如果结构中还包含输入类的DOM： 
  
会产生错误DOM更新 ==> 界面有问题
 
 
D. 开发中如何选择key?
 
 
最好使用每条数据的唯一标识作为key, 比如：id、手机号、身份证号、学号等唯一标识
 
 
如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的
 
12_3. 列表过滤
 
12_4. 列表排序
 

pdf.js下载
 
 
 
 
浏览器中直接打开预览 pdf 文件
 
 
安装
 
 
 
解压下载的zip文件，将解压后的整个目录（pdf-dist）拷贝到项目的 public 目录下（放在 public 目录下的文件不会被 webpack 处理）
 
 
 
 
 
使用 pdf.js 自带的预览界面 viewer.html 预览，可以在 viewer.css 文件对 viewer.html 做一些样式调整。
 
 
在需要使用的地方直接一个 a 标签 href 链接即可，a 标签的 href 链接形式为：/pdf-dist/web/viewer.html?file=pdf文件地址
 
 
<a href="/pdf-dist/web/viewer.html?file=http://0.0.0.0:8000/file/demo.pdf">
  预览文件
</a>
 
 
 
在浏览器中打开文件后如果报错 file origin does not match viewer's ，只需要在 viewer.js 文件中找到 throw new Error('file origin does not match viewer\'s'); 这一行，并注释掉即可
 
 
 
 
 
通过 vue 路由组件实现预览
 
 
 
在项目 views 文件夹下新建一个组件用于 pdf 文件预览，比如我这里的 views/pdf-preview/index.vue
 
 
index.vue 文件内容如下，主要是通过 iframe 实现
 
<template>
  <div class="box">
    <a href="/">返回首页</a>
    <iframe :src="$route.query.url" class="iframe"></iframe>
  </div>
</template>

<script>
export default {
  mounted() {
    this.$router.push({
      path: "download",
      query: {
        url:
          "/pdf-dist/web/viewer.html?file=/xf.pdf"
      }
    });
  }
};
</script>

<style scoped>
.iframe {
  width: 100%;
  height: 100vh;
  border: 0;
  overflow: hidden;
  box-sizing: border-box;
}
</style>