男装网站模板演示,seo哪里有培训,邯郸网站优化建设,网站流量刷**
方法1#xff1a;word、xls、ppt、pdf 这些文件#xff0c; 如果预览的文件是链接可以直接打开#xff0c;可用微软官方的预览地址
** iframe width100% :srctextVisibleURl idmyFramePPT styleborder: none;backgroun…**
方法1word、xls、ppt、pdf 这些文件 如果预览的文件是链接可以直接打开可用微软官方的预览地址
** iframe width100% :srctextVisibleURl idmyFramePPT styleborder: none;background: #f3f5f8title预览 height100%/iframedata(){return {textVisibleURl :}
}//可用window.open新开页面 或者 iframe 嵌入
//src是你文件的链接需要可以公网访问内网不可用如http://********.docxthis.textVisibleURl https://view.officeapps.live.com/op/embed.aspx?src${src}; //去掉头部一些不必要的按钮操作
window.open(this.textVisibleURl)
方法2word、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文件格式为.xlsxconst 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 classpdfBox1 v-showfileObj.showdiv class_headh5{{ fileObj.fileName }}/h5i clickcloseLook classel-icon-arrow-left/i/divdiv classword-wrap!-- 预览pdf --iframe :src./pdf/web/viewer.html?file fileObj.url height100% width100% idiframe title预览v-showfileObj.type .pdf /!-- 预览excel --vue-office-excel v-iffileObj.type .xlsx :srcfileObj.url renderedrenderedstylewidth: 100%; height: 100% /!-- 无适配图片预览Docx --VueOfficeDocx :srcfileObj.url v-iffileObj.type .docx/VueOfficeDocx!-- 预览ppt --iframe width100% :srcpptSrc idmyFramePPT v-iffileObj.type .pptx || fileObj.type .pptstyleborder: none;background: #f3f5f8 title预览 height100%/iframe/div/div文件列表的点击事件调用toFileBlob
scriptimport VueOfficePdf from vue-office/pdf;import VueOfficeDocx from vue-office/docximport 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.fileTypethis.fileObj.fileByte val.fileBytethis.fileObj.url val.dialogImageUrlif (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 nonelink.href urllink.download reportName //文件名document.body.appendChild(link)link.click()},
