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图标 ...
随机推荐
- 控制结构(7) 程序计数器(PC)
// 上一篇:最近最少使用(LRU) // 下一篇:线性化(linearization) 程序的每一行都是一个状态,对应的行指令.同步的情况下同一个pc一直自增,异步的时候,分裂出一个新的子pc,独立 ...
- 201521123056 《Java程序设计》第13周学习总结
1. 本周学习总结 2. 书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.edu.cn,分析返回结果有何不同?为什么会有这样的不同? 1.1 答: ...
- 201521123078 《Java程序设计》第12周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多流与文件相关内容. 2. 书面作业 将Student对象(属性:int id, String name,int age,doubl ...
- 一个Markdown的例子
一个例子: 例子开始 1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一 ...
- Android Studio不更新到最新版使用Kotlin
第一步:安装Kotlin插件 打开Settings面板,找到Plugins选项,点击Browse repositories(浏览仓库),输入“Kotlin”查找,然后安装即可.安装完成之后需要重启An ...
- maven profile切换正式环境和测试环境
有时候,我们在开发和部署的时候,有很多配置文件数据是不一样的,比如连接mysql,连接redis,一些properties文件等等 每次部署或者开发都要改配置文件太麻烦了,这个时候,就需要用到mave ...
- javascript面向对象编程笔记
对象:一切事物皆是对象.对象是一个整体,对外提供一些操作.比如说一个收音机是一个对象,我们不需要知道它的内部结构是什么,只需要会使用外部的按钮就可以使用收音机. 面向对象:面向对象语言的标志是他们都有 ...
- 将数据转成JSON
前言 前面我们在使用Strus2的时候,Struts2自带了组件能够让JavaBean对象.集合转成是JSON,不用我们自己拼接-这是非常方便的.但是,我们不一定使用Struts2框架来做开发呀.因此 ...
- Matlab入门学习(矩阵、函数、绘图的基本使用)
一.矩阵 1.定义和简单使用(一般的编程语言,数组下标都是从0开始的,但是MATLAB是从1开始的) >> a=[ ; ; ] a = >> b=[ ; ; ]; >&g ...
- 支持向量机SVM(Support Vector Machine)
支持向量机(Support Vector Machine)是一种监督式的机器学习方法(supervised machine learning),一般用于二类问题(binary classificati ...