vue在线预览word，excel , pdf组件化

标签：docx vue word type GLOBAL excel spread dialog data

方法一：如果文件是域名的，可以使用微软免费接口

//由于免费的在线查看，不支持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=falsethis.cancel()},submitFn(){this.confirm(true)},show(data){this.dialog.show=truethis.dialog.fileName=data.fileNamethis.dialog.fileUrl=this.api.GLOBAL_HOST_IMAGE + data.filePath + '?Authorization='+this.userInfo.tokenlet index= data.fileName.lastIndexOf('.')let suf=data.fileName.slice(index+1,data.fileName.length)this.dialog.fileType=suflet 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=trueif(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=truethat.GLOBAL.doBlob(this.api.GLOBAL_file_fileInfo_downloadNoneNeedAccess+'/'+this.fileId,{responseType:'blob'},(res) => {this.excel.data = res.bodythis.isIp.loading=false})},docxFn(){this.isIp.loading=truethat.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>

标签：docx,vue,word,type,GLOBAL,excel,spread,dialog,data
From： https://www.cnblogs.com/lizhao123/p/16865075.html