vue预览和下载 pdf、ppt、word、excel文档,文件类型为链接或者base64格式或者文件流,
**
方法1：word、xls、ppt、pdf 这些文件， 如果预览的文件是链接可以直接打开，可用微软官方的预览地址
**
<iframe width="100%" :src="textVisibleURl " id="myFramePPT" style="border: none;background: #f3f5f8"
title="预览" height="100%"></iframe>
data(){
return {
textVisibleURl :''
}
}
//可用window.open新开页面 或者 iframe 嵌入
//src是你文件的链接，需要可以公网访问，内网不可用，如http://********.docx
this.textVisibleURl = `https://view.officeapps.live.com/op/embed.aspx?src=${src}`; //去掉头部一些不必要的按钮操作
window.open(this.textVisibleURl)
方法2：word、xls、ppt、pdf 这些文件， 如果预览的文件是类型是文件流或者base64格式
本次我的项目中后端返回的是base64格式，在预览中需要将base64格式转为文件流
methods：{
getCustomerPoolList() {
this.$api.getCustomerPoolList({ cityName: this.cityName.toString(), homeId: this.homeInterViewSelected.map(item => item.homeId).toString() }).then(res => {
res.data.forEach(item => {
//此处两个遍历和预览无关，为业务逻辑，主要区分出文档和图片
item.mapImageObj = item.fileList.filter(file => {
return file.fileType == '.png' || file.fileType == '.jpg' || file.fileType == '.jpeg'
})[0] || {}
item.annexFileList = item.fileList.filter(file => {
return file.fileType !== '.png' && file.fileType !== '.jpg' && file.fileType !== '.jpeg'
}) || {}
//item.annexFileList为所有文档的数组
item.annexFileList.forEach((i, index) => {
//fileByte为base64格式，如上图，如果你的文件格式直接为文件流，此处 base64Str 到 byteArray 可跳过
let base64Str = i.fileByte;
const byteCharacters = atob(base64Str);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
//针对不同的文件添加不同的BlobType，此处转为文件流URL，文件为文件流可直接从此处开始
//fileType 可以从fileName中截取，也可让后端返回
if (i.fileType == '.pdf') {
const blob = new Blob([byteArray], { type: 'application/pdf' });
i.dialogImageUrl = URL.createObjectURL(blob);
} else if (i.fileType == '.docx') {
const blob = new Blob([byteArray], { type: 'application/msword' });
i.dialogImageUrl = URL.createObjectURL(blob);
} else if (i.fileType == '.ppt' || i.fileType == '.pptx') {
const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' });
i.dialogImageUrl = URL.createObjectURL(blob);
} else {
//此处为excel文件，格式为".xlsx"
const blob = new Blob([byteArray], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
i.dialogImageUrl = URL.createObjectURL(blob);
return
}
})
})
this.customerPoolObj = JSON.parse(JSON.stringify(res.data))
})
},
}
处理完后的数据，dialogImageUrl 为对象URL,预览全靠这个URL！！！
开始页面渲染
文件列表展示
预览所需的插件
#docx文档预览组件方法1
npm install @vue-office/docx vue-demi
#docx文档预览组件方法2，本文没有使用此插件预览docx
npm install mammoth
#excel文档预览组件
npm install @vue-office/excel vue-demi
#pdf文档预览组件 ，本文中没有使用此插件预览PDF
npm install @vue-office/pdf vue-demi
将两个文件复制到public目录下
ppt iframe的index.html代码，可适配移动端，pc端可删除适配移动端代码
下面的fileUrl:就是 上面处理完后的 dialogImageUrl
图片中的代码如下
let currentUrl = window.location.href;
function getUrlParams(url) {
const paramsRegex = /[?&]+([^=&]+)=([^&]*)/gi;
const params = {};
let match;
while ((match = paramsRegex.exec(url))) {
params[match[1]] = match[2];
}
return params;
}
let fileUrl = getUrlParams(currentUrl).fileUrl;
console.log("fileUrl-->", fileUrl);
//fileUrl:就是dialogImageUrl
// #pptx div的id
$("#pptx").pptxToHtml({
pptxFileUrl: fileUrl,
pptxFileName: "fileName",
slidesScale: "100%",
slideMode: false,
keyBoardShortCut: false,
});
// 适配移动端！！
let timer = setInterval(() => {
const $slides = $(".slides");
if ($slides.children().length) {
const slidesWidth = Math.max(
...Array.from($slides.children()).map((s) => s.offsetWidth)
);
const $wrapper = $("#pptx");
const wrapperWidth = window.innerWidth;
const wrapperHeight = window.innerHeight - 55;
$wrapper.css({
transform: `scale(${wrapperWidth / slidesWidth})`,
"transform-origin": "top left",
height: wrapperHeight * (1 / (wrapperWidth / slidesWidth)) + "px",
});
clearInterval(timer);
}
}, 100);
ppt/index.html中获取vue页面传进来的src链接获取到
<div class="pdfBox1" v-show="fileObj.show">
<div class="_head">
<h5>{{ fileObj.fileName }}</h5>
<i @click="closeLook" class="el-icon-arrow-left"></i>
</div>
<div class="word-wrap">
<!-- 预览pdf -->
<iframe :src="'./pdf/web/viewer.html?file=' + fileObj.url" height="100%" width="100%" id="iframe" title="预览"
v-show="fileObj.type === '.pdf'" />
<!-- 预览excel -->
<vue-office-excel v-if="fileObj.type === '.xlsx'" :src="fileObj.url" @rendered="rendered"
style="width: 100%; height: 100%" />
<!-- 无适配图片，预览Docx -->
<VueOfficeDocx :src="fileObj.url" v-if="fileObj.type === '.docx'"></VueOfficeDocx>
<!-- 预览ppt -->
<iframe width="100%" :src="pptSrc" id="myFramePPT" v-if="fileObj.type === '.pptx' || fileObj.type === '.ppt'"
style="border: none;background: #f3f5f8" title="预览" height="100%"></iframe>
</div>
</div>
文件列表的点击事件调用toFileBlob
<script>
import VueOfficePdf from "@vue-office/pdf";
import VueOfficeDocx from '@vue-office/docx'
import VueOfficeExcel from "@vue-office/excel";
import "@vue-office/docx/lib/index.css";
import "@vue-office/excel/lib/index.css";
export default {
//val为文件列表的对象，主要参数为
data(){
return{
fileObj: {
dialogImageUrl：'',
fileByte：'',
fileName：'',
fileType：'',
url ：'',
},
pptSrc :''
}
}
toFileBlob(val) {
console.log('aaa', val)
this.fileObj.show = true;
this.fileObj.fileName = val.fileName;
this.fileObj.type = val.fileType
this.fileObj.fileByte = val.fileByte
this.fileObj.url = val.dialogImageUrl
if (val.fileType === '.ppt' || val.fileType === '.pptx') {
//传入到iframe中
this.pptSrc = `/ppt/index.html?fileUrl=${val.dialogImageUrl}`;
}else if (val.fileType === '.docx') {
//预览word的第二种方法
// let base64Str = val.fileByte;
// const byteCharacters = atob(base64Str);
// const byteNumbers = new Array(byteCharacters.length);
// for (let i = 0; i < byteCharacters.length; i++) {
// byteNumbers[i] = byteCharacters.charCodeAt(i);
// }
/* mammoth.convertToHtml({
arrayBuffer: new Uint8Array(byteNumbers)
}).then((resultObject) => {
this.$nextTick(() => {
this.wordText = resultObject.value;
});
}); */
}
}
</script>
下载base64类型和文件流文件
downloadGO(data, reportName) {
if (!data) {
return
}
let base64Str = data;
const byteCharacters = atob(base64Str);
const byteNumbers = new Array(byteCharacters.length);
for (let i = 0; i < byteCharacters.length; i++) {
byteNumbers[i] = byteCharacters.charCodeAt(i);
}
const byteArray = new Uint8Array(byteNumbers);
//文件流省略上述步骤，直接下述开始，byteArray为文件流
let url = window.URL.createObjectURL(new Blob([byteArray]))
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.download = reportName //文件名
document.body.appendChild(link)
link.click()
},