Vue之展示PDF格式的文档
事实上有很多种在前端展示PDF格式文档的方法,小编也用过好多种,例如有<iframe>、<embed>和<object>这些标签,但是在Vue项目里,这些方法都不能很好的展示PDF文档,实际上Vue给大家准备了展示PDF的插件,所以小编今天给大家讲解一下这个插件的用法。
首先下载插件
命令:npm install pdfjs-dist
下载完毕以后新建一个组件用来存放PDF文档
引入所需要的插件:
接下来就是Vue给大家已经准备好了展示PDF文档所需要的代码,不需要大家在手动书写了:
这里需要告诉大家,url最好还是传到七牛云上比较好(因为跨域这个东西很烦人)。
下面给大家带来完整的代码:(这里要注意,存放PDF的容器最好用canvas)
<template>
<div>
<p>合同预览</p>
<canvas v-for="page in pages" :id="'the-canvas'+page" :key="page"></canvas>
</div>
</template> <script>
import PDFJS from "pdfjs-dist";
import pdfjsLib from "pdfjs-dist";
// const Base64 = require('js-base64').Base64 export default {
name: "ContractPreview",
data() {
return {
title: "查看协议",
pdfDoc: null,
pages: 0
};
},
methods: {
// 初始化pdfjs
initThePDFJSLIB: function() {
pdfjsLib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";
},
_renderPage(num) {
this.pdfDoc.getPage(num).then(page => {
let canvas = document.getElementById("the-canvas" + num);
let ctx = canvas.getContext("2d");
let dpr = window.devicePixelRatio || 1;
let bsr =
ctx.webkitBackingStorePixelRatio ||
ctx.mozBackingStorePixelRatio ||
ctx.msBackingStorePixelRatio ||
ctx.oBackingStorePixelRatio ||
ctx.backingStorePixelRatio ||
1;
let ratio = dpr / bsr;
let viewport = page.getViewport(
screen.availWidth / page.getViewport(1).width
);
canvas.width = viewport.width * ratio;
canvas.height = viewport.height * ratio;
canvas.style.width = viewport.width + "px";
canvas.style.height = viewport.height + "px";
ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
let renderContext = {
canvasContext: ctx,
viewport: viewport
};
page.render(renderContext);
if (this.pages > num) {
this._renderPage(num + 1);
}
});
},
_loadFile(url) {
PDFJS.getDocument(url).then(pdf => {
this.pdfDoc = pdf;
this.pages = this.pdfDoc.numPages;
this.$nextTick(() => {
this._renderPage(1);
});
});
}
},
mounted() {
this.initThePDFJSLIB();
document.title = this.title;
let url = 'PDF链接地址’;
console.log(url);
this._loadFile(url);
}
};
</script> <style scoped>
canvas {
display: block;
border-bottom: 1px solid black;
}
</style>
Vue之展示PDF格式的文档的更多相关文章
- pdf.js 使用实例(app直接预览pdf格式的文档)
pdf.js可以实现在html下直接浏览pdf文档,是一款开源的pdf文档读取解析插件 pdf.js主要包含两个库文件,一个pdf.js和一个pdf.worker.js,,一个负责API解析,一个负责 ...
- 判断pdf、word文档、图片等文件类型(格式)、大小的简便方法
判断pdf.word文档.图片等文件类型(格式).大小的简便方法 很久没发文了,今天有时间就写一下吧. 关于上传文件,通常我们都需要对其进行判断,限制上传的类型,如果是上传图片,我们甚至会把图片转化成 ...
- CEBX格式的文档如何转换为PDF格式文档、DOCX文档?
方正阿帕比CEBX格式的文档如何转换为PDF格式文档.DOCX文档? 简介: PDF.Doc.Docx格式的文档使用的非常普遍,金山WPS可以直接打开PDF和Doc.Docx文档,使用也很方便. CE ...
- vue 中展示PDF内容
vue 中展示PDF内容 不久前有个需要改的需求,以前是直接根据链接让用户下载对应pdf文件来查看,最主要是给用户查看,然而这种并不是很安全的,其他用户可以进行下载或者使用pdf链接分享给其他人,所以 ...
- Struts2 API的chm格式帮助文档制作教程
Struts2 API的chm格式帮助文档制作教程 在SSH三个框架中,Struts2的API文档是最难做的,这里所说的格式是chm格式的,chm的格式很方便,Hibernate API文档和Spri ...
- java通过url在线预览Word、excel、ppt、pdf、txt文档
java通过url在线预览Word.excel.ppt.pdf.txt文档中的内容[只获得其中的文字] 在页面上显示各种文档中的内容.在servlet中的逻辑 word: BufferedInputS ...
- Python处理PDF和Word文档常用的方法
Python处理PDF和Word文档的模块是PyPDF2,使用之前需要先导入. 打开一个PDF文档的操作顺序是:用open()函数打开文件并用一个变量来接收,然后把变量给传递给PdfFileReade ...
- 使用Lucene对doc、docx、pdf、txt文档进行全文检索功能的实现
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/76273859 本文出自[我是干勾鱼的博客] 这里讲一下使用Lucene对doc. ...
- JAVA实现在线查看PDF和office文档
一个项目中要做一个在线预览附件(和百度文库差不多)的小功能点,楼主在开发过程中踩了很多坑的同时也总结了一些方法,仅供广大猿友参考,那么要实现这个小功能,目前主要是有如下3种可行的实现方式,下面先说实现 ...
随机推荐
- Scrapy 框架简介
Scrapy 框架 介绍 Scrapy一个开源和协作的框架,其最初是为了页面抓取 (更确切来说, 网络抓取 )所设计的,使用它可以以快速.简单.可扩展的方式从网站中提取所需的数据.但目前Scrapy的 ...
- 【JVM】JVM随笔索引
JVM目录 [JVM]Java内存模型 [JVM]类加载机制 [JVM]深度分析Java的ClassLoader机制(源码级别) [JVM]关于类加载器准备阶段的一道面试题目 [JVM]JVM垃圾收集 ...
- webpack优化
注:总结自吴浩麟---<webpack深入浅出>第四章--优化 1.缩小文件的搜索范围 1.1 优化loader:module.rules中,使用test,include,exclude尽 ...
- k8s常用命令演示
kubectl run --image=xxx name_xx --port kubectl run --image=nginx nginx-app --port=80 kubectl expose ...
- Linux安装Oracle JDK替换OpenJDK详解
转自http://www.lsychina.com/howto_install_oracle-jdk_replace_openjdk_on_linux.html 众所周知,由于Oracle公司的JDK ...
- 关于word-break和word-wrap的使用和区别
当一段文字有一个长长长的英文单词的情况下使用这两个属性的区别: word-wrap: 哈哈哈, aaaaa bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb word-break: ...
- Java基础知识拾遗(三)
集合框架 SortedSet接口,声明了以升序进行排序的行为. Queue接口,声明了队列行为,队列通常是先进先出的列表 Deque接口,扩展了Queue接口,声明了双端队列的行为.双端队列可以像标准 ...
- Nginx 完全配置
入门教程 初识Nginx 你真的了解如何将 Nginx 配置为Web服务器吗 设置静态网页编码 --> 针对非类Unix系统 针对服务器 http { ... charset UTF-8; .. ...
- D. Vanya and Treasure Codeforces Round #355 (Div. 2)
http://codeforces.com/contest/677/problem/D 建颗新树,节点元素包含r.c.dis,第i层包含拥有编号为i的钥匙的所有节点.用i-1层更新i层,逐层更新到底层 ...
- requests 获取token
# encoding:utf-8 import reimport jsonimport randomfrom requests.sessions import Session class Regist ...