repository·master·Indexed 26 days ago
https://github.com/501351981/vue-officeA Vue-based component library for previewing office documents, including docx, excel (.xlsx, .xls), pdf, and pptx. It supports Vue 2 and Vue 3, and provides pure JavaScript preview capabilities for use with non-Vue frameworks. The library includes dedicated components such as VueOfficeDocx, VueOfficeExcel, VueOfficePdf, and VueOfficePptx, as well as core JS preview instances (JsDocxPreview and JsExcelPreview) for manual lifecycle management.
The vue3-demo package provides two methods for file previewing:
The vue2-demo package provides a demonstration of how to preview documents using Vue 2.7. It supports two primary preview methods:
vue-demi@0.14.6 as a peer dependency. If you are using Vue 2.6 or below, you must also install @vue/composition-api.@vue-office/docx as a global plugin in your Vue application. This registers the VueOfficeDocx component globally, allowing you to use it in any template without manual imports.@vue-office/pptx globally in your Vue application, use the .install method. This registers the component using the name defined within the component itself.@vue-office/pdf as a global Vue plugin. This registers the VueOfficePdf component globally using its defined name, allowing you to use it in any template without manual imports.@vue-office/excel as a global plugin in your Vue application. This registers the VueOfficeExcel component globally, allowing you to use it in any template without manual imports.Use the VueOfficeDocx component to preview Word documents. The src prop accepts a URL string (network address or relative path), an ArrayBuffer, or a Blob. You can listen to the @rendered event when rendering is complete.
<template>
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="rendered"
/>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
import '@vue-office/docx/lib/index.css'
export default {
components:{
VueOfficeDocx
},
data(){
return {
docx: 'http://static.shanhuxueyuan.com/test6.docx'
}
},
methods:{
rendered(){
console.log("渲染完成")
}
}
}
</script>Use the VueOfficeExcel component to preview Excel documents (.xlsx, .xls). The src prop accepts a URL string or binary data (ArrayBuffer/Blob). Supported events include @rendered and @error.
<template>
<vue-office-excel
:src="excel"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
import VueOfficeExcel from '@vue-office/excel'
import '@vue-office/excel/lib/index.css'
export default {
components: {
VueOfficeExcel
},
data() {
return {
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>Use the VueOfficePdf component to preview PDF documents. The src prop accepts a URL string or binary data (ArrayBuffer/Blob). Supported events include @rendered and @error.
<template>
<vue-office-pdf
:src="pdf"
style="height: 100vh"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
import VueOfficePdf from '@vue-office/pdf'
export default {
components: {
VueOfficePdf
},
data() {
return {
pdf: 'http://static.shanhuxueyuan.com/test.pdf'
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>Use the VueOfficePptx component to preview PowerPoint documents (.pptx). The src prop accepts a URL string or binary data (ArrayBuffer/Blob). Supported events include @rendered and @error.
<template>
<vue-office-pptx
:src="pdf"
style="height: 100vh"
@rendered="renderedHandler"
@error="errorHandler"
/>
</template>
<script>
import VueOfficePptx from '@vue-office/pptx'
export default {
components: {
VueOfficePptx
},
data() {
return {
pdf: 'http://****/test.pptx'
}
},
methods: {
renderedHandler() {
console.log("渲染完成")
},
errorHandler() {
console.log("渲染失败")
}
}
}
</script>The options object passed to init or via setOptions() controls the behavior and appearance of the Excel previewer.
Available Options:
xls: Boolean. Set to true if previewing legacy .xls files. Defaults to false.minColLength: Number. Minimum column length. Defaults to 20.showContextmenu: Boolean. Whether to show the context menu. Defaults to false.cellSelected: Function. Callback triggered when a single cell is selected. Receives an object: { cell, rowIndex, columnIndex }.cellsSelected: Function. Callback triggered when a range of cells is selected. Receives an object: { cell, startRowIndex, startColumnIndex, endRowIndex, endColumnIndex }.beforeTransformData: Function. Hook to modify the workbook data before it is processed. Receives the workbook object.transformData: Function. Hook to modify the spreadsheet-compatible data after transformation. Receives workbookData.