vue 预览PDF、Docx、EXCEL文件

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<template>
    <div class="contentArea">
       <div class="fileContainer" ref="fileDiv" v-if="$route.query.fileName.indexOf('docx') !== -1"></div>
       <div class="fileContainer" v-html="tableau" id="excelView" v-else></div>
    </div>
</template>
 
<script>
import XLSX from 'xlsx';
let docx = require("docx-preview");
import {FileDownload, xlsxFileDownload} from '@/api/index'
export default {
    data(){
        return{
            vHtml: '',
            tableau: '',
            fileId: '',
        }
    },
    mounted () {
        this.fileId = this.$route.query.fileId
        const fileName = this.$route.query.fileName
        if(fileName.indexOf('xls') !== -1){
            this.previewData()
        } else {
            this.getFile()
        }
        window.document.title = fileName
    },
    methods: {
        // word文件预览
        getFile(){
            FileDownload(this.fileId).then((res) => {
              const content = res.data;
              docx.renderAsync(content, this.$refs.fileDiv);
            }).catch(() => {
              this.$message.error('下载失败!')
            });
        },
        async previewPdfFile(){
            const resCancel = await xlsxFileDownload(this.fileId);
            // const url = window.URL.createObjectURL(file.originFileObj);
            const url = window.URL.createObjectURL(resCancel.data);
            window.open(url, file.name);
        },
        // xlsx预览
        async previewData() {
                const resCancel = await xlsxFileDownload(this.fileId);
                if (resCancel) {
                    const data = new Uint8Array(resCancel.data);
                    const workbook = XLSX.read(data, {
                        type: 'array', cellDates: true, dateNF: "yyyy-MM-dd"
                    });
                    // 删除掉没有数据的sheet
                    Object.values(workbook.Sheets).forEach((sheet, index) => {
                        if (Object.keys(sheet).indexOf('!ref') === -1) {
                            delete workbook.Sheets[workbook.SheetNames[index]];
                        }
                        Object.values(sheet).forEach(sec=>{
                          if(sec.constructor === Object && sec.t=='d'){
                            sec.w = this.$moment(sec.v).format("YYYY/MM/DD")
                          }
                        })
 
                    });
                    var worksheet = workbook.Sheets[workbook.SheetNames[0]]; // workbook.SheetNames 下存的是该文件每个工作表名字,这里取出第一个工作表
                    this.tableau = XLSX.utils.sheet_to_html(worksheet); // 渲染
                    this.$nextTick(function () {
                        // DOM加载完毕后执行,解决HTMLConnection有内容但是length为0问题。
                        this.setStyle4ExcelHtml();
                    });
                } else {
                    this.$message.warn(resCancel.errorMessage);
 
                }
            },
            // 设置Excel转成HTML后的样式
            setStyle4ExcelHtml() {
                const excelViewDOM = document.getElementById("excelView");
                if (excelViewDOM) {
                    const excelViewTDNodes = excelViewDOM.getElementsByTagName("td"); // 获取的是HTMLConnection
                    if (excelViewTDNodes) {
                        const excelViewTDArr = Array.prototype.slice.call(excelViewTDNodes);
                        for (const i in excelViewTDArr) {
                            const id = excelViewTDArr[i].id; // 默认生成的id格式为sjs-A1、sjs-A2......
                            if (id) {
                                const idNum = id.replace(/[^0-9]/gi, ""); // 提取id中的数字,即行号
                                if (idNum && (idNum === "1" || idNum === 1)) {
                                    // 第一行标题行
                                    excelViewTDArr[i].classList.add("class4Title");
                                } else if ((idNum !== "1" || idNum !== 1)) {
                                    // 第二行表头行
                                    excelViewTDArr[i].classList.add("class4TableTh");
                                }
                            }
                        }
                    }
                }
            },
    },
 
}
</script>
 
<style lang="less" scoped>
.contentArea{
    height: 100%;
    width: 100%;
}
.fileContainer{
    height: 100%;
    width: 100%;
}
 
/deep/ .class4Title {
    font-size: 18px !important;
    font-weight: bold !important;
    padding: 10px !important;
    border: 1px solid #e8e8e8;
    text-align: center;
}
 
/deep/ .class4TableTh {
    font-size: 12px !important;
    font-weight: bold !important;
    padding: 10px !important;
    border: 1px solid #e8e8e8;
    text-align: center;
    white-space: break-spaces
 
}
 
</style>

  

posted @   不服憋着  阅读(455)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
点击右上角即可分享
微信分享提示