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

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

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

预览效果链接: https://github.com/501351981/vue-office
插件文档链接: https://501351981.github.io/vue-office/examples/docs/config/

一.安装依赖

//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

二、主要代码

<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.excelContainerhtml2canvas(element, { useCORS: true }).then(canvas => {const image = canvas.toDataURL('image/png')const link = document.createElement('a')link.href = imagelink.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>