Skip to content

V
vue-office
Commit 47705ce7 by licheng
Options

init

parents
Showing with 509 additions and 0 deletions
.gitignore 0 → 100644
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
vue3-demo
包括通过vue组件预览和纯js预览两种方式。
\ No newline at end of file
babel.config.js 0 → 100644
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}
jsconfig.json 0 → 100644
{
"compilerOptions": {
"target": "es5",
"module": "esnext",
"baseUrl": "./",
"moduleResolution": "node",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom",
"dom.iterable",
"scripthost"
]
}
}
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
{
"name": "vue3-demo",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@js-preview/docx": "^1.6.0",
"@js-preview/excel": "^1.7.3",
"@js-preview/pdf": "^2.0.0",
"@vue-office/docx": "^1.6.0",
"@vue-office/excel": "^1.7.3",
"@vue-office/pdf": "^2.0.0",
"core-js": "^3.8.3",
"element-plus": "^2.6.2",
"vue": "^3.2.13",
"vue-demi": "^0.14.6",
"vue-router": "^4.3.0"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
public/index.html 0 → 100644
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
src/App.vue 0 → 100644
<template>
<div id="app-wrapper">
<div class="menu-area">
<el-menu :default-active="defaultActive" @select="changeMenu">
<el-menu-item
v-for="item in menus"
:index="item.index"
:key="item.index"
>{{ item.label }}
</el-menu-item>
</el-menu>
</div>
<div class="main-content">
<router-view/>
</div>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
return {
menus: [
{
label: 'docx预览（VueOfficeDocx）',
index: '/vue-office-docx'
},
{
label: 'excel预览（VueOfficeExcel）',
index: '/vue-office-excel'
},
{
label: 'pdf预览（VueOfficePdf）',
index: '/vue-office-pdf'
},
{
label: 'docx预览（纯js预览）',
index: '/js-preview-docx'
},
{
label: 'excel预览（纯js预览）',
index: '/js-preview-excel'
},
{
label: 'pdf预览（纯js预览）',
index: '/js-preview-pdf'
}
],
defaultActive: '/vue-office-docx'
};
},
mounted() {
let path = location.hash.match(/^#(\/.*?)(\?|$)/)[1];
this.defaultActive = path === '/' ? '/vue-office-docx' : path;
},
methods: {
changeMenu(index) {
this.$router.push(index);
}
}
};
</script>
<style>
* {
margin: 0;
}
#app-wrapper {
display: flex;
}
.menu-area{
width: 230px;
height: 100vh;
}
.main-content {
flex: 1;
height: 100vh;
overflow-y: auto;
}
</style>
src/components/JsPreviewDocx.vue 0 → 100644
<template>
<div id="docx"></div>
</template>
<script>
import jsPreviewDocx from "@js-preview/docx";
import '@js-preview/docx/lib/index.css'
export default {
name: "JsPreviewDocxDemo",
data(){
return {
myDocxPreviewer: null
}
},
mounted() {
//初始化时指明要挂载的父元素Dom节点
this.myDocxPreviewer = jsPreviewDocx.init(document.getElementById('docx'));
//传递要预览的文件地址即可
this.myDocxPreviewer.preview('http://static.shanhuxueyuan.com/test.docx').then(()=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
},
beforeUnmount() {
this.myDocxPreviewer.destroy();
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/JsPreviewExcel.vue 0 → 100644
<template>
<div id="excel" style="height: 100vh"></div>
</template>
<script>
import jsPreviewExcel from "@js-preview/excel";
import '@js-preview/excel/lib/index.css';
export default {
name: "JsPreviewExcelDemo",
data(){
return {
myExcelPreviewer: null
}
},
mounted(){
this.myExcelPreviewer = jsPreviewExcel.init(document.getElementById('excel'));
this.myExcelPreviewer.preview("http://39.170.91.81:48080/admin-api/infra/file/4/get/84d94fc88870cbb3ece6a7dc11a53a9d5b37a8b28b5f487086009bbebb7429f6.xlsx").then(()=>{
console.log('预览完成');
}).catch(e=>{
console.log('预览失败', e);
})
},
beforeUnmount() {
this.myExcelPreviewer.destroy();
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/JsPreviewPdf.vue 0 → 100644
<template>
<div id="pdf"></div>
</template>
<script>
import jsPreviewPdf from "@js-preview/pdf";
export default {
name: "JsPreviewPdfDemo",
data(){
return {
myPdfPreviewer: null
}
},
mounted() {
this.myPdfPreviewer = jsPreviewPdf.init(document.getElementById('pdf'), {
onError: (e)=>{
console.log('发生错误', e)
},
onRendered: ()=>{
console.log('渲染完成')
}
});
this.myPdfPreviewer.preview('http://static.shanhuxueyuan.com/test.pdf');
},
beforeUnmount() {
this.myPdfPreviewer.destroy();
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/VueOfficeDocx.vue 0 → 100644
<template>
<div v-loading="loading">
<vue-office-docx
:src="docx"
style="height: 100vh;"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
</template>
<script>
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
console.log(VueOfficeDocx)
//引入相关样式
import '@vue-office/docx/lib/index.css'
export default {
name: "VueOfficeDocxDemo",
components: {
VueOfficeDocx
},
data() {
return {
loading: true,
docx: 'http://static.shanhuxueyuan.com/test.docx'
}
},
methods: {
renderedHandler() {
this.loading = false;
console.log("渲染完成")
},
errorHandler() {
this.loading = false;
console.log("渲染失败")
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/components/VueOfficeExcel.vue 0 → 100644
<template>
<div v-loading="loading">
<vue-office-excel :src="excel" :options="options" style="height: 100vh;" @rendered="renderedHandler"
@error="errorHandler" @cell-click="cellClickHandler" />
</div>
</template>
<script>
//引入VueOfficeExcel组件
import VueOfficeExcel from '@vue-office/excel'
//引入相关样式
import '@vue-office/excel/lib/index.css'
export default {
name: "VueOfficeExcelDemo",
components: {
VueOfficeExcel
},
data() {
return {
loading: true,
options: {
xls: false, //预览xlsx文件设为false；预览xls文件设为true
minColLength: 0, // excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: 0, // excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset: 10, //如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽
heightOffset: 10, //在默认渲染的列表高度上再加 Npx高
beforeTransformData: (workbookData) => { return workbookData }, //底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。
transformData: (workbookData) => {
console.log(workbookData, "1111111");
return workbookData
}, //将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容
},
excel: "http://39.170.91.81:48080/admin-api/infra/file/4/get/84d94fc88870cbb3ece6a7dc11a53a9d5b37a8b28b5f487086009bbebb7429f6.xlsx",//设置文档地址
// excel: "http://39.170.91.81:48080/admin-api/infra/file/4/get/c32a681cef68c63db52026871554f54196adefeaff711a9545b52a87dc303d22.xls"
}
},
methods: {
renderedHandler() {
this.loading = false;
console.log("渲染完成")
},
errorHandler() {
this.loading = false;
console.log("渲染失败")
},
cellClickHandler(event, cell) {
console.log("点击的单元格信息:", cell);
console.log("单元格的值:", cell.text);
console.log("单元格的坐标:", cell.row, cell.col);
}
}
};
</script>
<style scoped></style>
\ No newline at end of file
src/components/VueOfficePdf.vue 0 → 100644
<template>
<div v-loading="loading">
<vue-office-pdf
:src="pdf"
@rendered="renderedHandler"
@error="errorHandler"
/>
</div>
</template>
<script>
//引入VueOfficePdf组件
import VueOfficePdf from '@vue-office/pdf'
export default {
name: "VueOfficePdfDemo",
components: {
VueOfficePdf
},
data() {
return {
loading: true,
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
}
},
methods: {
renderedHandler() {
this.loading = false;
console.log("渲染完成")
},
errorHandler() {
this.loading = false;
console.log("渲染失败")
}
}
};
</script>
<style scoped>
</style>
\ No newline at end of file
src/main.js 0 → 100644
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import routes from "@/routes";
const app = createApp(App)
app.use(routes)
app.use(ElementPlus)
app.mount('#app')
src/routes.js 0 → 100644
import {createRouter, createWebHashHistory} from 'vue-router'
console.log(createRouter)
export default createRouter({
history: createWebHashHistory(),
routes: [
{
path: '/',
redirect: '/vue-office-docx'
},
{
path: '/vue-office-docx',
component: () => import('./components/VueOfficeDocx.vue')
},
{
path: '/vue-office-excel',
component: () => import('./components/VueOfficeExcel.vue')
},
{
path: '/vue-office-pdf',
component: () => import('./components/VueOfficePdf.vue')
},
{
path: '/js-preview-docx',
component: () => import('./components/JsPreviewDocx.vue')
},
{
path: '/js-preview-excel',
component: () => import('./components/JsPreviewExcel.vue')
},
{
path: '/js-preview-pdf',
component: () => import('./components/JsPreviewPdf.vue')
}
]
})
\ No newline at end of file
vue.config.js 0 → 100644
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
configureWebpack(){
return {
resolve: {
fallback: {
"util": false,
"stream": false
}
}
}
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment