vue在线预览word，excel , pdf组件化
方法一：如果文件是域名的，可以使用微软免费接口
//由于免费的在线查看，不支持ip+端口的形式所以单独处理 this.dialog.url='http://view.officeapps.live.com/op/view.aspx?src='+ encodeURIComponent(this.dialog.fileUrl);
方法二：如何是私有化部署，域名是ip加端口的可以使用如下
word：使用插件 docx-preview
npm i docx-preview --save
使用
<template>
<div ref="file" id="fileid" style="width: 100%;height: 100%;overflow: auto;"></div>
</template>
<script>
let that
let docx = require("docx-preview");
export default {
name: 'lzWps',
data() {
return {}
},
mounted() {
that =this
},
methods: {
docxFn(){
//请求接口，下载文件
that.GLOBAL.doBlob(this.api.GLOBAL_file_fileInfo_downloadNoneNeedAccess+'/'+this.fileId,{responseType:'blob'},(res) => {
docx.renderAsync(res.body, this.$refs.file); // 渲染到页面
})
}
}
}
</script>
pdf 可以直接使用浏览器自带的打开功能
excel 打开可以使用 SpreadJS
npm install @grapecity/spread-sheets-vue @grapecity/spread-sheets
npm install @grapecity/spread-excelio
使用
<template>
<div class="lzExcel">
<gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread" style="width: 100%;height: 100%;">
<gc-worksheet>
</gc-worksheet>
</gc-spread-sheets>
<input type="file" id="file" @change="fileChange">
</div>
</template>
<script>
let that
import "@grapecity/spread-sheets/styles/gc.spread.sheets.excel2016colorful.css";
import * as GC from "@grapecity/spread-sheets";
import "@grapecity/spread-sheets-vue";
import { IO } from "@grapecity/spread-excelio";
import {jsonData} from './data';
import {
mapGetters
} from 'vuex'
export default {
computed: {
...mapGetters(['api', 'userInfo']),
},
name: 'lzExcel',
props: {
datas:null,
},
data() {
return {
spread:null,
}
},
mounted() {
that = this
this.excelIO = new IO();
},
watch:{
datas(){
this.excelUrl=this.datas
this.seeFn()
}
},
methods: {
initSpread: function (spread) {
this.spread = spread;
spread.options.calcOnDemand = true;
},
seeFn(){
console.log(this.excelUrl);
this.excelIO.open(this.excelUrl, (json)=> {
console.log(json);
// spread.fromJSON(json, {
// incrementalLoading: {
// loading: function (progress, args) {
// progress = progress * 100;
// loadingStatus.value = progress;
// console.log("current loading sheet", args.sheet && args.sheet.name());
// },
// loaded: function () {
// }
// }
// });
this.spread.fromJSON(json);
},(e)=> {
// process error
console.log(e);
}, {
password: 0
});
},
fileChange(data){
this.excelUrl=data.target.files[0]
this.seeFn()
},
}
}
</script>
<style lang="scss" scoped>
.lzExcel{
width: 100%;height: 100%;overflow: auto;
}
</style>
引入
<lzExcel :datas="excel.data"></lzExcel>
excelFn(){
//请求接口，下载文件
that.GLOBAL.doBlob(this.api.GLOBAL_file_fileInfo_downloadNoneNeedAccess+'/'+this.fileId,{responseType:'blob'},(res) => { this.datas = res.body }) },
<script> let that import { mapGetters } from 'vuex' let docx = require("docx-preview"); import lzExcel from '@/components/lzExcel/lzExcel' export default { computed: { ...mapGetters(['api','userInfo']), }, components:{ lzExcel }, name: 'lzWps', props: { close:{type:Function}, confirm: {type:Function}, cancel: {type:Function}, width: { type: String, default: '80%' }, title: { type: String, default: '选择' }, filePath: { type: String, default: '' }, fileId: { type: String, default: '' }, fileName: { type: String, default: '' }, }, data() { return { dialog:{ show:false, url:'', fileName:'', fileId:'', fileUrl:'', fileType:'word' }, isIp:{ show:false, loading:true, }, excel:{ data:"" } } }, mounted() { that =this }, methods: { cancelFn(){ this.dialog.show=false this.cancel() }, submitFn(){ this.confirm(true) }, show(data){ this.dialog.show=true this.dialog.fileName=data.fileName this.dialog.fileUrl=this.api.GLOBAL_HOST_IMAGE + data.filePath + '?Authorization='+this.userInfo.token let index= data.fileName.lastIndexOf('.') let suf=data.fileName.slice(index+1,data.fileName.length) this.dialog.fileType=suf let type=this.$lizhao.file.lzGetTypeSuffix(suf) if(type=='word'){ if(suf=='pdf'){ this.dialog.url=this.dialog.fileUrl+'&download=0' return } //若是私有化或者ip形式，自行判断 if(this.checkdomain()==false){ this.isIp.show=true if(suf=='docx'||suf=='doc'){ this.docxFn() }else if(suf=='xlsx'||suf=='xls'){ this.excelFn() } return } // 若不是ip形式，直接使用免费的接口 this.isIp.show=false //由于免费的在线查看，不支持ip+端口的形式所以单独处理 this.dialog.url='http://view.officeapps.live.com/op/view.aspx?src='+ encodeURIComponent(this.dialog.fileUrl); } }, excelFn(){ this.isIp.loading=true that.GLOBAL.doBlob(this.api.GLOBAL_file_fileInfo_downloadNoneNeedAccess+'/'+this.fileId,{responseType:'arraybuffer'},(res) => { this.excel.data = res.body this.isIp.loading=false }) }, docxFn(){ this.isIp.loading=true that.GLOBAL.doBlob(this.api.GLOBAL_file_fileInfo_downloadNoneNeedAccess+'/'+this.fileId,{responseType:'blob'},(res) => { docx.renderAsync(res.body, this.$refs.file); // 渲染到页面 this.isIp.loading=false }) }, download(){ window.location.href=this.dialog.fileUrl }, handclose(){ this.close() }, //验证是否是域名 checkdomain(){ let doname = /^([\w-]+\.)+((com)|(net)|(org)|(gov\.cn)|(info)|(cc)|(com\.cn)|(net\.cn)|(org\.cn)|(name)|(biz)|(tv)|(cn)|(mobi)|(name)|(sh)|(ac)| (io)|(tw)|(com\.tw)|(hk)|(com\.hk)|(ws)|(travel)|(us)|(tm)|(la)|(me\.uk)|(org\.uk)|(ltd\.uk)|(plc\.uk)|(in)|(eu)|(it)|(jp))$/; let flag_domain = doname.test(document.domain); if(!flag_domain){//错误的域名 return false }else{ return true } } } } </script>
