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>