yaclty/vue-office
1
0
Fork 0
mirror of https://github.com/501351981/vue-office.git synced 2025-07-25 07:41:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

修改example打包

Browse Source
This commit is contained in:
liyulin 2023-01-04 16:46:00 +08:00
parent 1f9231fd66
commit ec15accfe3
21 changed files with 151 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
examples/App.vue
View File

@ -1,8 +1,16 @@
<template>
<div id="app">
<!-- <excel-demo />-->
<pdf-demo />
<docx-demo />
<el-tabs v-model="activeName" type="card">
<el-tab-pane label="docx文件预览" name="DOCX">
<docx-demo />
</el-tab-pane>
<el-tab-pane label="excel文件预览" name="EXCEL">
<excel-demo />
</el-tab-pane>
<el-tab-pane label="pdf文件预览" name="PDF">
<pdf-demo />
</el-tab-pane>
</el-tabs>
</div>
</template>
@ -20,6 +28,7 @@ export default {
},
data(){
return {
activeName: 'DOCX'
}
},
methods:{

49
examples/components/DocxDemo.vue
View File

@ -1,13 +1,26 @@
<template>
<div id="docx-demo">
<input type="file" @change="selectFile">
<vue-office-docx :src="src" :request-options="options"/>
<div class="operate-area">
<div style="width: 300px;">
<el-radio-group v-model="type" size="small">
<el-radio-button label="url" >远程文件地址</el-radio-button>
<el-radio-button label="upload">上传本地文件</el-radio-button>
</el-radio-group>
</div>
<el-input v-if="type==='url'" placeholder="请输入doxc文件地址" v-model="inputSrc"/>
<el-button v-if="type==='url'" type="primary" style="margin-left: 10px" @click="src=inputSrc">预览</el-button>
<el-upload v-if="type!=='url'" :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action="">
<el-button size="small" type="warning">点击上传</el-button>
</el-upload>
</div>
<vue-office-docx :src="src" />
</div>
</template>
<script>
/* eslint-disable */
import VueOfficeDocx from '../../packages/docx'
import VueOfficeDocx from '../../packages/docx/index'
export default {
name: 'DocxDemo',
components: {
@ -15,38 +28,32 @@ export default {
},
data(){
return {
type: 'url',
inputSrc: 'http://static.shanhuxueyuan.com/test6.docx',
src:'http://static.shanhuxueyuan.com/test6.docx',
options:{
headers:{
a:1
}
}
fileList:[]
}
},
methods:{
selectFile(event){
let file = event.target.files[0];
console.log(typeof file, file instanceof Blob)
var reader = new FileReader();
beforeUpload(file){
let reader = new FileReader();
reader.onload = (loadEvent) => {
var arrayBuffer = loadEvent.target.result;
let arrayBuffer = loadEvent.target.result;
this.src = arrayBuffer
};
reader.readAsArrayBuffer(file);
return false
}
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
<style lang="less" scoped>
.operate-area{
display: flex;
margin: 10px;
align-items: center;
}
</style>

1
examples/dist/css/chunk-vendors.7e42fe7f.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/css/index.8969edb9.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

BIN
examples/dist/fonts/element-icons.f1a45d74.ttf vendored Normal file
View File

Binary file not shown.

BIN
examples/dist/fonts/element-icons.ff18efd1.woff vendored Normal file
View File

Binary file not shown.

2
examples/dist/index.html vendored
View File

@ -1 +1 @@
<!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"><link rel="icon" href="/favicon.ico"><title>vue-office</title><script defer="defer" src="/vue-office/examples/dist/js/chunk-vendors.4c3a4a8d.js"></script><script defer="defer" src="/vue-office/examples/dist/js/index.2c733a59.js"></script><link href="/vue-office/examples/dist/css/index.763e8ce0.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue-office doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>
<!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"><link rel="icon" href="/vue-office/examples/dist/favicon.ico"><title>vue-office</title><script defer="defer" src="/vue-office/examples/dist/js/chunk-vendors.cf9c6bad.js"></script><script defer="defer" src="/vue-office/examples/dist/js/index.7df5482e.js"></script><link href="/vue-office/examples/dist/css/chunk-vendors.7e42fe7f.css" rel="stylesheet"><link href="/vue-office/examples/dist/css/index.8969edb9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but vue-office doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div></body></html>

43
examples/dist/js/chunk-vendors.cf9c6bad.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/js/chunk-vendors.cf9c6bad.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

45
examples/dist/js/index.7df5482e.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/js/index.7df5482e.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
examples/dist/vue-office/examples/dist/css/index.763e8ce0.css vendored
View File

File diff suppressed because one or more lines are too long

8
examples/dist/vue-office/examples/dist/js/chunk-vendors.4c3a4a8d.js vendored
View File

File diff suppressed because one or more lines are too long

1
examples/dist/vue-office/examples/dist/js/chunk-vendors.4c3a4a8d.js.map vendored
View File

File diff suppressed because one or more lines are too long

57
examples/dist/vue-office/examples/dist/js/index.2c733a59.js vendored
View File

File diff suppressed because one or more lines are too long

1
examples/dist/vue-office/examples/dist/js/index.2c733a59.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
examples/main.js
View File

@ -1,7 +1,9 @@
import Vue from 'vue'
import App from './App.vue'
import ElementUi from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.use(ElementUi)
new Vue({
render: h => h(App),

10
package.json
View File

@ -2,16 +2,7 @@
"name": "vue-office",
"version": "0.0.9",
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
"main": "lib/index.js",
"author": "hit757",
"files": [
"lib/index.js",
"lib/docx/index.js",
"lib/pdf/index.js",
"lib/excel/index.js",
"lib/excel/index.css",
"lib/static/"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
@ -48,6 +39,7 @@
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"element-ui": "^2.15.12",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"lerna": "^6.3.0",

10
packages/docx/src/docx.js
View File

@ -1,3 +1,4 @@
/*eslint-disable*/
const docxPreview = require('docx-preview')
function getData(src, options={}) {
if (typeof src === 'string') {
@ -7,12 +8,17 @@ function getData(src, options={}) {
}
function fetchDocx(src, options) {
return fetch(src, options)
return fetch(src, options).then(res=>{
if(res.status !== 200){
return Promise.reject(res)
}
return res
})
}
function render(data, container){
if(!data){
container.innerHtml = ''
container.innerHTML = ''
return Promise.resolve()
}
let blob

5
packages/docx/src/main.vue
View File

@ -3,6 +3,7 @@
</template>
<script>
/*eslint-disable*/
import docx from './docx'
export default {
@ -37,8 +38,12 @@ export default {
docx.getData(this.src, this.requestOptions).then(res => {
docx.render(res, this.$refs["vue-office-docx"]).then(() => {
this.$emit('rendered')
}).catch(e => {
docx.render('', this.$refs["vue-office-docx"])
this.$emit('error', e)
})
}).catch(e => {
docx.render('', this.$refs["vue-office-docx"])
this.$emit('error', e)
})
}

2
vue.config.js
View File

@ -2,7 +2,7 @@ const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
outputDir:'examples/dist',
assetsDir:"vue-office/examples/dist",
publicPath:"/vue-office/examples/dist",
pages: {
index: {
entry: 'examples/main.js',