<template>
    <div id="docx">
        <div v-html="excelHtml"></div>
    </div>
</template>

<script>
import axios from 'axios'
import {getLocalArrayBuffer} from '@/utils/getLocalFile.js'
import XLSX from 'xlsx'
const docx = require('docx-preview')
window.JSZip = require('jszip')
export default {
    name: 'Docx',
    props: {
        fileUrl: {
            default: '',
            type: String,
            required: true,
        },
    },
    data() {
        return {
            excelHtml: null,
        }
    },
    mounted() {
        this.initDocx()
    },
    methods: {
        async initDocx() {
            const res = await getLocalArrayBuffer(this.fileUrl)
            console.log(res, 'res')
            var data = new Uint8Array(res.data)
            var workbook = XLSX.read(data, {
                type: 'array',
            })

            this.excelHtml = ''
            console.log('exlnameworkbook', workbook)
            for (var i = 0; i < workbook.SheetNames.length; i++) {
                const exlname = workbook.SheetNames[i]
                console.log('exlname i', workbook.SheetNames[i])
                console.log('exlname s', workbook.Sheets)
                this.excelHtml +=
                    '<h4 style="padding-left:10px;font-size:13px;">' +
                    exlname +
                    '</h4>' +
                    '' +
                    XLSX.utils.sheet_to_html(workbook.Sheets[exlname]) +
                    '<br>'
            }
        },
    },
}
</script>

<style lang="scss" scoped>
#docx {
  width: 100%;
  height: 100%;
}
</style>

