vue2.0纯前端预览附件方法汇总
一、使用iframe预览
1.使用 Office 在线查看器
支持 Word 和 Excel 和Pdf 文档预览,兼容性好。不需要额外安装库,直接使用在线服务。 文件地址必须公网
<iframe :src="textVisibleURl" frameborder="0" width="700" height="800"></iframe>
// 打开文件预览
clickPreview(pitem) {
if (/\.pdf$/i.test(pitem.name)) {
this.textVisibleURl = pitem.url;
} else if (/\.(doc|docx|xls|xlsx|ppt|pptx|pdf)$/i.test(pitem.name)) {
let src = pitem.url;
//这个地址预览的时候有一些按钮
// this.textVisibleURl = `https://view.officeapps.live.com/op/view.aspx?src=${src}`;
this.textVisibleURl = `https://view.officeapps.live.com/op/embed.aspx?src=${src}`;
} else if (/\.csv$/i.test(pitem.name)) {
this.textVisibleURl = `http://view.xdocin.com/xdoc?_xdoc=${pitem.url}`;
}
},
2.XDOC文档预览服务
调用方法:https://view.xdocin.com/view?src=你的文档地址
<iframe
class="iframeDom"
:src="textVisibleURl"
frameborder="0"
width="100%"
height="800"
></iframe>
clickPreview(){
var xurl = 'https://view.xdocin.com/view?src=';
xurl += encodeURIComponent(newV);
let ops = {
pdf: true,
// toolbar: false,
// limit: '2,1', //只显示第二页
// limit: '2', //显示一二页
limit: '5,4', //显示一二页
// limit: '2,3', //显示二三四页
};
for (var a in ops) {
xurl += '&' + a + '=' + encodeURIComponent(ops[a]);
}
this.textVisibleURl = xurl;
}
XDOC官网地址:https://view.xdocin.com/
二、vue-office
支持多种文件(.docx、.pdf、.excel)预览的vue组件套装,支持vue2/3。
只需提供文档的src(网络地址)即可完成文档预览
(其中word是转换成html 和css,可以对文档内容进行高亮定位什么的)
有文档网络地址,比如 https://***.docx
文件上传时预览,此时可以获取文件的ArrayBuffer或Blob
具体效果可以参考: https://501351981.github.io/vue-office/examples/dist/#/docx
//docx文档预览组件
npm install @vue-office/docx vue-demi
//excel文档预览组件
npm install @vue-office/excel vue-demi
//pdf文档预览组件
npm install @vue-office/pdf vue-demi
1.docx预览
// 使用网络地址
<template>
<vue-office-docx :src="docx" @rendered="rendered"/>
</template>
<script>
//1.引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址,可以是相对地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
//********************************************************************************************
//2.element的上传组件,获取文件的arrayBuffer
<template>
<div id="docx-demo">
<el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action="">
<el-button size="small" type="warning">点击上传</el-button>
</el-upload>
<vue-office-docx :src="src" />
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data(){
return {
src:'',
fileList:[]
}
},
methods:{
beforeUpload(file){
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (loadEvent) => {
let arrayBuffer = loadEvent.target.result;
this.src = arrayBuffer
};
return false
}
}
}
</script>
//********************************************************************************************
//3.原生的input type="file"
<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components: {
VueOfficeDocx
},
data(){
return {
src: ''
}
},
methods:{
changeHandle(event){
let file = event.target.files[0]
let fileReader = new FileReader()
fileReader.readAsArrayBuffer(file)
fileReader.onload = () => {
this.src = fileReader.result
}
}
}
}
</script>
2.excel文档预览
<template>
<vue-office-excel :src="excel" @rendered="rendered"/>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
components:{
VueOfficeExcel
},
data(){
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
3.pdf文档预览
<template>
<vue-office-pdf :src="pdf" @rendered="rendered"/>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
components:{
VueOfficePdf
},
data(){
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>
具体代码可以参考: https://gitee.com/ye-jizeng/vue-office#https://gitee.com/link?target=https%3A%2F%2F501351981.github.io%2Fvue-office%2Fexamples%2Fdist%2F
三、file-viewer插件(封装好的预览组件)
1.通过上传获取文件arrayBuffer
具体效果可以参考: https://zhuye1993.github.io/file-view/dist/index.html
代码地址: https://github.com/zhuye1993/file-view
参考文章链接: https://juejin.cn/post/7071598747519549454
// 主要代码
<template>
<div :class="{ hidden }">
<div class="banner">
<div class="container">
<h1>
<div>
在线文档查看
<input class="file-select" type="file" @change="handleChange" />
</div>
</h1>
</div>
</div>
<div class="container">
<div v-show="loading" class="well loading">正在加载中,请耐心等待...</div>
<div v-show="!loading" class="well" ref="output"></div>
</div>
</div>
</template>
<script>
import { getExtend, readBuffer, render } from "@/components/util";
import { parse } from "qs";
/**
* 支持嵌入式显示,基于postMessage支持跨域
* 示例代码:
*
*/
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
return {
// 加载状态跟踪
loading: false,
// 上个渲染实例
last: null,
// 隐藏头部,当基于消息机制渲染,将隐藏
hidden: false,
};
},
created() {
// 允许使用预留的消息机制发送二进制数据,必须在url后添加?name=xxx.xxx&from=xxx
const { from, name } = parse(location.search.substr(1));
if (from) {
window.addEventListener("message", (event) => {
const { origin, data: blob } = event;
if (origin === from && blob instanceof Blob) {
// 构造响应,自动渲染
const file = new File([blob], name, {});
this.hidden = true;
this.handleChange({ target: { files: [file] } });
}
});
}
},
methods: {
async handleChange(e) {
this.loading = true;
try {
const [file] = e.target.files;
const arrayBuffer = await readBuffer(file);
this.loading = false;
this.last = await this.displayResult(arrayBuffer, file);
} catch (e) {
console.error(e);
} finally {
this.loading = false;
}
},
displayResult(buffer, file) {
// 取得文件名
const { name } = file;
// 取得扩展名
const extend = getExtend(name);
// 输出目的地
const { output } = this.$refs;
// 生成新的dom
const node = document.createElement("div");
// 添加孩子,防止vue实例替换dom元素
if (this.last) {
output.removeChild(this.last.$el);
this.last.$destroy();
}
const child = output.appendChild(node);
// 调用渲染方法进行渲染
return new Promise((resolve, reject) =>
render(buffer, extend, child).then(resolve).catch(reject)
);
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner {
overflow: auto;
text-align: center;
/* background-color: #12b6ff; */
color: #000;
}
.hidden .banner {
display: none;
}
.hidden .well {
height: calc(100vh - 12px);
}
.file-select {
position: absolute;
left: 5%;
top: 17px;
margin-left: 20px;
}
.banner div {
color: #000;
}
.banner h1 {
font-size: 20px;
line-height: 2;
margin: 0.5em 0;
}
.well {
display: block;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin: 5px;
width: calc(100% - 12px);
height: calc(100vh - 73px);
overflow: auto;
}
.loading {
text-align: center;
padding-top: 50px;
}
.messages .warning {
color: #cc6600;
}
</style>
<style>
.pptx-wrapper {
max-width: 1000px;
margin: 0 auto;
}
</style>
2.通过上传获取文件arrayBuffer和Url方式(都转换成html 和css方式)
具体效果可以参考: https://viewer.flyfish.group/
代码地址:https://git.flyfish.dev/flyfish-group/file-viewer-demo
如果要获取最新的源码,要找人家开放私库权限(文章链接里面有)
参考文章链接: https://blog.csdn.net/wybaby168/article/details/122842866?spm=1001.2014.3001.5502
//对应解析的插件
word预览是用的docxjs
pdf预览是用的pdfjs
ppt预览是用的pptx2html
// 主要代码
<template>
<div class="file-viewer">
<div class="name">{{filename}}</div>
<div v-if="error" class="content loading">{{error}}</div>
<template v-else>
<div v-show="loading" class="content loading">{{message}}</div>
<div v-show="!loading" class="content" ref="output"></div>
</template>
</div>
</template>
<script>
import { getExtend, render } from "./util";
import axios from "axios";
import { readBuffer } from "../../common/util";
const messages = {
loading: '正在加载中,请耐心等待...',
reading: '正在努力解析文件...',
errorLoading: e => `加载文件异常:${e}`,
errorReading: e => `读取文件异常:${e}`,
}
export default {
name: "FileViewer",
props: {
file: {
type: [File, Blob, ArrayBuffer],
description: '通过文件对象或二进制数据加载文档'
},
url: {
type: String,
description: '通过url加载文档'
}
},
data() {
return {
// 加载状态跟踪
loading: false,
// 存在错误时有值
error: '',
// 消息
message: '',
// 文件名
filename: '',
}
},
watch: {
// url改变时,重新请求
url() {
this.loadFromUrl();
},
file(file) {
this.resolveFile(file);
},
},
mounted() {
if (this.file) {
this.resolveFile(this.file);
}
this.loadFromUrl();
},
methods: {
// 从url加载
async loadFromUrl() {
// 要预览的文件地址
const { url } = this;
if (!url) return;
this.startLoading(messages.loading)
const filename = url.substr(url.lastIndexOf('/') + 1);
// 拼接ajax请求文件内容
try {
const { data } = await axios({ url, method: 'get', responseType: 'blob' });
// 展示错误
if (!data) return this.showError('文件下载失败');
// 手动构建一个file
const file = this.wrap(data, filename);
// 解析文件
return this.resolveFile(file);
} catch (e) {
this.showError(messages.errorLoading(e));
} finally {
this.endLoading();
}
},
// 包装file
wrap(data, filename) {
if (data instanceof File) {
return data;
}
if (data instanceof Blob) {
return new File([ data ], filename, {});
}
if (data instanceof ArrayBuffer) {
return this.wrap(new Blob([ data ]));
}
},
// 处理并解析文件
async resolveFile(data) {
// 停止之前的加载
if (this.loading) this.endLoading();
// 安全的包装文件
const file = this.wrap(data);
// 开始加载
this.startLoading(messages.reading);
try {
this.filename = file.name && decodeURIComponent(file.name) || '';
const arrayBuffer = await readBuffer(file);
this.last = await this.displayResult(arrayBuffer, file)
} catch (e) {
this.showError(messages.errorReading(e));
} finally {
this.endLoading();
}
},
// 展示渲染最终效果
displayResult(buffer, file) {
// 取得文件名
const { name } = file;
// 取得扩展名
const extend = getExtend(name);
// 输出目的地
const { output } = this.$refs;
// 生成新的dom
const node = document.createElement('div');
// 添加孩子,防止vue实例替换dom元素
if (this.last) {
output.removeChild(output.lastChild);
this.last.$destroy();
}
const child = output.appendChild(node);
// 调用渲染方法进行渲染
return new Promise((resolve, reject) => render(buffer, extend, child)
.then(resolve).catch(reject));
},
showError(message) {
this.error = message;
},
startLoading(message) {
this.loading = true;
this.message = message;
this.error = '';
},
endLoading() {
this.loading = false;
this.message = '';
}
}
}
</script>
<style scoped>
.file-viewer {
position: relative;
}
.content {
display: block;
background-color: #f2f2f2;
border: 1px solid #ccc;
margin: 5px;
width: calc(100% - 12px);
height: calc(100vh - 73px);
overflow: auto;
}
.loading {
text-align: center;
padding-top: 50px;
}
.name {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 13px 0;
font-size: 20px;
text-shadow: 2px 2px #616161;
pointer-events: none;
color: white;
background: rgba(31, 31, 31, 0.22);
text-align: center;
z-index: 10000;
}
</style>
四、vue-pdf插件
arrayBuffer和Url方式都支持
npm install --save vue-pdf
import pdf from 'vue-pdf'
1.全文预览
<template>
<div>
<pdf
v-for="i in numPages"
:key="i"
:page="i"
:src="pdfUrl"
style="width: 100%"
@num-pages="pageCount = $event"
></pdf>
</div>
</template>
<script>
import pdf from 'vue-pdf';
export default {
name: 'PDF',
components: { pdf },
data() {
return {
pageCount: 10, //当前页
pdfUrl: '',
src: 'https://.pdf', // pdf文件地址
numPages: 0, //总页数
};
},
mounted() {
this.loadPdfHandler();
},
methods: {
async loadPdfHandler() {
this.pdfUrl = pdf.createLoadingTask(this.src);
this.pdfUrl.promise.then(pdf => {
this.numPages = pdf.numPages;
});
},
},
};
</script>
2.指定页数,直接预览到某页的
<template>
<div class="pdf-preview-out" v-loading="boxLoading">
<!-- 上部 外层容器 用于滚动-->
<div class="scroll-box">
<!-- 用于截取调缩放后的空白区域 -->
<div class="pdf-box">
<!-- pdf预览区域(会被缩放) -->
<div :style="getPdfSize()" class="pdf-scale-box">
<!-- 预览组件 -->
<pdf
:src="url"
:page="currentPage"
@num-pages="getTotalPage"
@page-loaded="pageLoaded"
@loaded="mountedLoaded"
></pdf>
</div>
</div>
</div>
<!-- 底部操作栏 -->
<div class="bottom-tools">
<div>共 {{ pageTotal }} 页</div>
<div class="page">
<el-button round type="primary" :disabled="currentPage === 1" @click="chengPage">
上一页
</el-button>
<!-- 页码展示及跳转 -->
<el-button
round
type="primary"
:disabled="currentPage === pageTotal"
@click="chengPage('+')"
>
下一页
</el-button>
</div>
<div class="scale">
<el-button
type="primary"
icon="el-icon-minus"
circle
:disabled="pageScale - 0.1 < 0.3"
@click="scalePage"
></el-button>
<el-button
type="primary"
icon="el-icon-plus"
circle
:disabled="pageScale + 0.1 > 1"
@click="scalePage('+')"
></el-button>
</div>
</div>
</div>
</template>
<script>
// 插件引入
import pdf from 'vue-pdf';
export default {
components: {
pdf,
},
data() {
return {
// 总页数
pageTotal: 0,
// 当前页
currentPage: 3,
// 缩放比例
pageScale: 0.8,
// 遮罩
boxLoading: true,
pageChangeTimer: null,
url: 'https://.pdf',
};
},
methods: {
// 获取到pdf总页数时触发 会传入总页数
getTotalPage(page) {
this.pageTotal = page;
},
// 初始化加载完毕触发
mountedLoaded() {
// 去除遮罩
this.boxLoading = false;
},
// 每加载完成一页时触发(初始化/翻页时均会触发)
pageLoaded() {
// 重新设置pdf预览区域容器外容器的尺寸
this.setPdfBoxSize();
},
// 设置pdf预览区域容器的缩放尺寸
getPdfSize() {
return {
transform: `scale(${this.pageScale})`,
};
},
// 点击缩放时触发
scalePage(type) {
// 改变缩放比例
let sacle = 0;
if (type === '+') {
sacle = this.pageScale + 0.1;
} else {
sacle = this.pageScale - 0.1;
}
// 可能会涉及js的精度损失 保留一位小数即可
this.pageScale = Number(sacle.toFixed(1));
// 缩放后pdf预览区域容器中会有留白 重新设置pdf预览区域容器外容器的尺寸
this.setPdfBoxSize();
},
// 方法 翻页
chengPage(type) {
// 防抖 0.5秒内不再次触发时执行
if (this.pageChangeTimer) {
clearTimeout(this.pageChangeTimer);
}
// 执行翻页
this.pageChangeTimer = setTimeout(() => {
if (type === '+') {
this.currentPage += 1;
} else {
this.currentPage -= 1;
}
// 翻页后将滚动条归位到顶部
this.scrollbarReset();
this.pageChangeTimer = null;
}, 500);
},
// 方法 滚动条归位到顶部
scrollbarReset() {
let boxDom = document.querySelector('.scroll-box');
boxDom.scrollTop = 0;
},
// 方法 设置pdf预览区域容器外容器的尺寸
setPdfBoxSize() {
// 缩放后 pdf的显示上会缩小 但元素的实际占地尺寸不会变化(仍是原尺寸) 导致可能会出现部分区域留白 通过改变pdf预览区域容器外容器的尺寸 来将留白区域hidden
// 获取pdf的原尺寸
let boxDom = document.querySelector('.pdf-scale-box');
// 获取要设置尺寸的元素dom
let setDom = document.querySelector('.pdf-box');
// 如有缩放 高度根据缩放比例变化(48px是预留的上下外边距)
if (this.pageScale !== 1 && boxDom && setDom) {
setDom.style.height = `${boxDom.clientHeight * this.pageScale + 48}px`;
} else {
setDom.style.height = '';
}
// console.log(this.pageScale)
// console.log(boxDom.clientWidth * this.pageScale)
},
},
};
</script>
<style lang="scss" scoped>
.pdf-preview-out {
// 高度为占满父组件中的外层容器(若不需要在父组件中设置高度 也可以在本组件中直接设置为所需值)
height: 100%;
// border: 1px solid #909;
&,
div {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
// 滚动容器
.scroll-box {
// 高度按比例 溢出滚动
height: 800px;
overflow: auto;
border: 2px solid #c0d8f3;
border-bottom: none;
border-radius: 6px;
background-color: #eeeeee;
// 滚动条样式
&::-webkit-scrollbar {
width: 10px;
}
&::-webkit-scrollbar-thumb {
background-color: #c0d8f3;
border-radius: 6px;
}
&::-webkit-scrollbar-track {
background-color: transparent;
border-radius: 6px;
}
// 用于缩放后截取掉不需要的空白的容器
.pdf-box {
overflow: hidden;
padding: 24px;
// border: 1px solid rgb(165, 11, 236);
}
// pdf预览区容器
.pdf-scale-box {
box-shadow: 0px 0px 20px 5px #666565;
// border: 2px solid #090;
// 设置缩放的中心点
transform-origin: center top;
transition: 0.2s;
}
}
.bottom-tools {
height: 50px;
line-height: 50px;
background-color: #c0d8f3;
border: 1px solid #5caaf8;
border-radius: 6px;
display: flex;
padding: 0px 24px;
.page {
color: #636a70;
flex-grow: 1;
// border: 1px solid #909;
span {
margin-right: 20px;
}
}
.scale {
// border: 1px solid #909;
text-align: right;
}
}
}
</style>
链接: https://blog.csdn.net/m0_71537867/article/details/131614868
五、pptx.js插件
另外预览ppt还有一个插件pptx但是我没试,放两个链接,你们可以自己试试
链接: https://www.cnblogs.com/xyulz/p/17812301.html
链接: https://blog.51cto.com/u_16213605/8386577
重要写完了~~~~~心累