vue项目中操作PDF文件
以前从来没接触过前端要求显示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: {
}
}
</script>
3.在本地跑起你的项目就完了 npm run dev
4.最后附上github地址 https://github.com/FranckFreiburger/vue-pdf
好了,搞定,溜了遛了......
vue项目中操作PDF文件的更多相关文章
- vue项目中导出PDF的两种方式
参考大家导出的方式,基本上是如下两种: 1.使用 html2Canvas + jsPDF 导出PDF, 这种方式什么都好,就是下载的pdf太模糊了.对要求好的pdf这种方式真是不行啊! 2.调用浏览器 ...
- C#项目中操作Excel文件——使用NPOI库
转载自:http://blog.csdn.net/dcrmg/article/details/52356236# 感谢-牧野- 实际C#项目中经常会涉及到需要对本地Excel文件进行操作,特别是一些包 ...
- vue-cli构建的vue项目中引入stylus文件
在写基于vue-cli的vue项目时,如果直接引入styl文件,会报错,需要安装stylus.stylus-loader依赖以及别名配置. 1.下载安装stylus.stylus-loader,推荐使 ...
- vue项目中导出Excel文件功能的前端代码实现
在项目中遇到了两种不同情况, 1.get请求导出文件,实现起来相对简单 // 导出数据 exportData() { window.location.href = `/oes-content-mana ...
- Vue项目中引入外部文件(css、js、less)
例子中css文件采用bootstrap.css,js文件采用jQuery,less文件用less.less(自定义文件) 步骤一:安装webpack cnpm install webpack -g 步 ...
- 在vue项目中的js文件里使用vue实例
参考的网址:https://blog.csdn.net/weixin_34353714/article/details/86958742 不为其他,就为了记录一下,方便以后查看: 第一种方法: 1.首 ...
- Vue 项目中对路由文件进行拆分(解构的方法)
项目需求场景: 在开发项目过程中,在项目过于庞大,路由信息非常多的情况下,如果将路由配置信息都放在一个文件里面,那么这个JS是不方便维护的, 那么,这个时候需要我们把这个庞大的路由文件,根据项目功能分 ...
- Vue项目中导入excel文件读取成js数组
1. 安装组件 cnpm install xlsx --save 2. 代码 <template> <span> <input class="input-fil ...
- vue项目中使用阿里iconfont图标
在上一篇文章中介绍了如何在vue项目中使用vue-awesome,如果你想了解,请移步<vue项目中使用vue-awesome> 这里介绍一下vue项目中如何使用阿里的iconfont图标 ...
随机推荐
- 201521123039 《java程序设计》第一周学习总结(新)
1.本章学习总结 -Java是面向对象的程序语言,它一切定义都是对象.我们所编写的Java程序经过编译后生成了.class的文件,再经过JVM对.class解释运行就可以得到Java程序,所以Java ...
- 201521123114《Java程序设计》第9周学习总结
1. 本章学习总结 2. 书面作业 Q1. 常用异常 题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免? 经常出现的异常 ...
- Struts2-在js中使用struts2标签
1, 支行是下拉列表,自助银行也是下拉列表,它们是级联关系; <tr> <th width="17%"><span>*</span> ...
- 交互模式下测试python代码及变量的四则运算
在交互模式下,python代码可以立即执行,所以这很方便我们进行代码测试 1.命令窗口,输入python (如果没配置环境变量则需带python安装目录的绝对路径) >>> 这个就是 ...
- Maven简介(一)
在现实的企业中,以低成本.高效率.高质量的完成项目,不仅仅需要技术大牛,企业更加需要管理大牛,管理者只懂技术是远远不够的.当然,管理可以说有很多的方面,例如:对人员的管理,也有对项目的管理等等.如果你 ...
- ng-options的使用
参考:官方文档.zhx1991 select 无默认选择一项 <select name="" id="" class="form-control ...
- openGPS.cn - 高精度IP定位原理,定位误差说明
[ip定位历史] 关于IP定位,最早是通过运营商实现,每个运营商申请到的ip段,在某个范围内使用. 因此早期只能是国家为单位的基础数据. 对于比较大的国家,就进一步划分,比如,中国某通讯公司(不打广告 ...
- windows7下MongoDB(V3.4)的使用及仓储设计
简单的介绍一下,我使用MongoDB的场景. 我们现在的物联网环境下,有部分数据,采样频率为2000条记录/分钟,这样下来一天24*60*2000=2880000约等于300万条数据,以后必然还会增加 ...
- Android 从ImageView中获取Bitmap对象方法
showImageView.setDrawingCacheEnabled(true); Bitmap bitmap=showImageView.getDrawingCache(); showImage ...
- C语言编程练习(一)
问题一: 问题描述:输入n个数,n<=100,找到其中最小的数和最大的数 输入样例: 4 1 2 3 4 输出样例:14 #include " ...