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

修复pdfsrc、修改说明文档

Browse Source
This commit is contained in:
liyulin 2023-01-20 09:42:57 +08:00
parent 5cd61318ff
commit 191c362bd0
7 changed files with 112 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
README.md
View File

@ -22,7 +22,12 @@ npm install @vue-office/pdf
``` ```
## 使用示例 ## 使用示例
文档预览场景大致可以分为两种：
- 有文档网络地址，比如 https://***.docx
- 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob
### docx文档的预览 ### docx文档的预览
**使用网络地址预览**
```vue ```vue
<template> <template>
<vue-office-docx :src="docx" @rendered="rendered"/> <vue-office-docx :src="docx" @rendered="rendered"/>
@ -38,7 +43,7 @@ export default {
}, },
data(){ data(){
return { return {
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址 docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
} }
}, },
methods:{ methods:{
@ -50,6 +55,82 @@ export default {
</script> </script>
``` ```
**上传文件预览**
我们使用element的上传组件作为示例，当然也可以使用普通的input type="file"，只要能获取文件的arrayBuffer即可
```vue
<template>
<div id="docx-demo">
<el-upload :limit="1" :file-list="fileList" accept=".docx" :beforeUpload="beforeUpload" action="">
<el-button size="small" type="warning">点击上传</el-button>
</el-upload>
<vue-office-docx :src="src" />
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
export default {
components: {
VueOfficeDocx
},
data(){
return {
src:'',
fileList:[]
}
},
methods:{
beforeUpload(file){
let reader = new FileReader();
reader.readAsArrayBuffer(file);
reader.onload = (loadEvent) => {
let arrayBuffer = loadEvent.target.result;
this.src = arrayBuffer
};
return false
}
}
}
</script>
```
如果是原生的input type="file"，也是类似的
```vue
<template>
<div>
<input type="file" @change="changeHandle"/>
<vue-office-docx :src="src"/>
</div>
</template>
<script>
import VueOfficeDocx from '@vue-office/docx'
export default {
components: {
VueOfficeDocx
},
data(){
return {
src: ''
}
},
methods:{
changeHandle(event){
let file = event.target.files[0]
let fileReader = new FileReader()
fileReader.readAsArrayBuffer(file)
fileReader.onload = () => {
this.src = fileReader.result
}
}
}
}
</script>
```
### excel文档预览 ### excel文档预览
```vue ```vue
<template> <template>
@ -107,4 +188,27 @@ export default {
} }
} }
</script> </script>
``` ```
excel和pdf，也同样支持通过文件上传进行预览，代码和docx的预览一样。
## API
为了使用简单，这几种组件的API尽量保持一致，如果是某个组件特有的，会单独注明
### 属性
| 属性 | 说明 | 类型 | 可选值 | 默认值 |
|-----------------|--------------------------------------------|---------------------------|----------------|-----|
| src | 文档地址 | String, ArrayBuffer, Blob | - | - |
| request-options | 请求参数，对应window.fetch的请求参数，可以用来设置header等请求信息 | Object | 参考window.fetch | {} |
### 事件
| 事件名 | 说明 | 参数 |
|----------|-----------------------------|-----------|
| rendered | 首次渲染完成及每次src变化之后渲染完成都会触发该事件 | |
| error | 各种失败，包括网络请求失败，渲染失败等 | errorInfo |

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="/vue-office/examples/dist/favicon.ico"><title>vue-office</title><script defer="defer" src="/vue-office/examples/dist/js/chunk-vendors.55971386.js"></script><script defer="defer" src="/vue-office/examples/dist/js/index.ae76ca21.js"></script><link href="/vue-office/examples/dist/css/chunk-vendors.4ae079ec.css" rel="stylesheet"><link href="/vue-office/examples/dist/css/index.2f78804d.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.55971386.js"></script><script defer="defer" src="/vue-office/examples/dist/js/index.7d0a43ac.js"></script><link href="/vue-office/examples/dist/css/chunk-vendors.4ae079ec.css" rel="stylesheet"><link href="/vue-office/examples/dist/css/index.2f78804d.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>

4
examples/dist/js/index.ae76ca21.js → examples/dist/js/index.7d0a43ac.js vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1
examples/dist/js/index.ae76ca21.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "vue-office", "name": "vue-office",
"version": "0.0.12", "version": "0.0.13",
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览", "description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
"author": "hit757", "author": "hit757",
"scripts": { "scripts": {

2
packages/pdf/src/main.vue
View File

@ -22,7 +22,7 @@ export default {
name: "VueOfficePdf", name: "VueOfficePdf",
props: { props: {
src: { src: {
type: [String, ArrayBuffer] type: [String, ArrayBuffer, Blob]
}, },
staticFileUrl:{ staticFileUrl:{
type: String, type: String,