以前从来没接触过前端要求显示PDF文件,一时之间有点懵逼,不知从哪下手啊...

  无奈之下,去找度娘,方法还不少,iframe  embed  object这些标签就可以, 可是拿过来做个demo一试,并没有什么卵用,网页中可以显示pdf,但是页面上就是出不来,反正我是没有试成功;还有PDFObject    PDF.js  这两个吧,PDFObject操作起来简单一些,PDF.js就稍微麻烦一些,不过基于jquery的不是我想要的效果,有兴趣的同学可以研究一下,貌似这个PDF.js很强大,附上链接:http://blog.csdn.net/liuyaqi1993/article/details/77822946

  接下来这个才是我们今天的主角,基于vue的vue-pdf,强大且简单

  1.安装

    npm install --save vue-pdf

  2.新建一个组件Cpdf.vue

  <template>
  <pdf src="../../static/main/PDF/jq2017_10_01.pdf"></pdf>
  </template>   <script>
    import pdf from 'vue-pdf'     export default {
    components: {
    pdf
     }
    }
  </script>

  3.在本地跑起你的项目就完了   npm  run  dev

  4.最后附上github地址  https://github.com/FranckFreiburger/vue-pdf

  好了,搞定,溜了遛了......

vue项目中操作PDF文件的更多相关文章

  1. vue项目中导出PDF的两种方式

    参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...

  2. C#项目中操作Excel文件——使用NPOI库

    转载自:http://blog.csdn.net/dcrmg/article/details/52356236# 感谢-牧野- 实际C#项目中经常会涉及到需要对本地Excel文件进行操作,特别是一些包 ...

  3. vue-cli构建的vue项目中引入stylus文件

    在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...

  4. vue项目中导出Excel文件功能的前端代码实现

    在项目中遇到了两种不同情况, 1.get请求导出文件,实现起来相对简单 // 导出数据 exportData() { window.location.href = `/oes-content-mana ...

  5. Vue项目中引入外部文件(css、js、less)

    例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...

  6. 在vue项目中的js文件里使用vue实例

    参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...

  7. Vue 项目中对路由文件进行拆分(解构的方法)

    项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...

  8. Vue项目中导入excel文件读取成js数组

    1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...

  9. vue项目中使用阿里iconfont图标

    在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...

随机推荐

  1. Java程序设计-表达式运算(个人博客)

    1.团队课程设计博客链接 洪亚文博客链接:http://www.cnblogs.com/201521123065hyw/ 郑晓丽博客链接:http://www.cnblogs.com/zxl3066/ ...

  2. 多线程:head first Thread.join()

    不使用Thread.join() 测试线程 先上代码: /** * Created by Zero on 2017/8/23. */ public class TestJoin implements ...

  3. python实例编写(3)--对话框,多窗口,下拉框,上传文件

    一.对话框: 例:点击百度的登录,弹出的小窗口 #coding=utf-8 from selenium import webdriver from time import sleep dr=webdr ...

  4. JDBC在javaweb中的应用之分页数据查询

    分页查询 分页查询是java web开发中经常使用到的技术.在数据库中数据量非常大的情况下,不适合将所有的数据全部显示到一个页面中,同时为了节约程序以及数据库的资源,就需要对数据进行分页查询操作. 通 ...

  5. linux文件权限解析(摘)

    用户组 在linux中的每个用户必须属于一个组,不能独立于组外.在linux中每个文件有所有者.所在组.其它组的概念 - 所有者 - 所在组 - 其它组 - 改变用户所在的组 所有者 一般为文件的创建 ...

  6. "svn: E155010: 提交失败"问题解决

    习惯于通过命令行操作svn,今天如往常一样提交代码: AnnytekiMacBook-Air:weiyibao Anny$ svn ci -m "code" 居然报错,如下: sv ...

  7. mysql用户权限配置

    创建管理员: mysqladmin -u root password 123456 登录 mysql -u root -p 建库及授权 > create database bdp charact ...

  8. H5页面解决IOS进入不自动播放问题(微信内)

    废话少说,直接上代码. 主要还是调用微信的jdk做兼容处理.,安卓可自动播放. ($(function(){ $(function(){ /* ** 复选框*/ $('.ul-radio').on(' ...

  9. 移植Linux-3.4.2内核到S3C2440

    一.BootLoader引导内核过程     1.Bootloader的工作     1.1.将内核读入内存     2.2.保存内核启动参数到指定位置,内核启动时去这个位置解析参数     3.3. ...

  10. Java的类加载器

    一.类加载器的概念 类加载器(class loader)用来加载 Java 类到 Java 虚拟机中.一般来说,Java 虚拟机使用 Java 类的方式如下:Java 源程序(.java 文件)在经过 ...