纯前端上传word,xlsx,ppt,在前端预览并下载成图片（预览效果可以，下载图片效果不太理想）

一.安装依赖
二、主要代码

预览效果链接: https://github.com/501351981/vue-office

插件文档链接: https://501351981.github.io/vue-office/examples/docs/config/

一.安装依赖

javascript 复制代码

//docx文档预览组件
npm install @vue-office/docx vue-demi
 
//excel文档预览组件
npm install @vue-office/excel vue-demi
 
//pdf文档预览组件
npm install @vue-office/pdf vue-demi
//html生成图片
npm install html2canvas

二、主要代码

javascript 复制代码

<template>
    <div class="index">
        <div class="select-file">
            <input id="input" type="file" />
        </div>
        <div class="file-preview" ref="excelContainer">
            <!-- <VueOfficeDocx v-if="src" style="height: 600px;" :src="src" /> -->
            <VueOfficeExcel class="file-content" v-if="src" style="height: 1280px" :src="src" />
            <!-- <VueOfficePdf v-if="src" style="height: 600px" :src="src" /> -->
        </div>
        <button @click="generateImage">Generate Image</button>
    </div>
</template>
<script>
// import VueOfficeDocx from '@vue-office/docx'
// import '@vue-office/docx/lib/index.css'

import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'

// import VueOfficePdf from '@vue-office/pdf'

import html2canvas from 'html2canvas'
export default {
    data() {
        return {
            src: '',
        }
    },
    components: {
        // VueOfficeDocx,
        VueOfficeExcel,
        //  VueOfficePdf
    },
    mounted() {
        this.addInputEventListener()
    },
    methods: {
        /**
         * application/msword;charset=utf-8
         * application/pdf;charset=utf-8
         * application/vnd.ms-excel
         */
        addInputEventListener() {
            const input = document.querySelector('#input')
            input.addEventListener('input', e => {
                const fileBlob = e.target.files[0]

                // 第一种方式（通过window.URL.createObjectURL将Blob文件流转为一个路径）
                this.src = window.URL.createObjectURL(new Blob([fileBlob]))

                // 第二种方式（转为base64编码）
                const fileReader = new FileReader()
                fileReader.readAsDataURL(fileBlob)
                fileReader.onload = e => {
                    this.src = e.target.result
                }

                // 第三种方式（获取到buffer）
                fileBlob.arrayBuffer().then(buffer => {
                    this.src = buffer
                })
            })
        },
        generateImage() {
            const element = this.$refs.excelContainer
            html2canvas(element, { useCORS: true })
                .then(canvas => {
                    const image = canvas.toDataURL('image/png')
                    const link = document.createElement('a')
                    link.href = image
                    link.download = 'excel_image.png'
                    link.click()
                })
                .catch(error => {
                    console.error('Error generating image:', error)
                })
        },
    },
}
</script>
<style scoped>
.index {
    width: 100%;
    height: 100%;
    padding: 15px;
    box-sizing: border-box;
}
.select-file {
    width: 100%;
    height: 35px;
    border-bottom: 1px dashed #ccc;
    margin-bottom: 15px;
}
.file-preview {
    width: 100%;
    height: 100%;
    border: 1px dashed #007acc;
}
</style>

没了~

链接: https://www.jb51.net/article/278400.htm