mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-15 07:32:19 +08:00
修复pdfsrc、修改说明文档
This commit is contained in:
liyulin
parent
5cd61318ff
commit
191c362bd0
108
README.md
108
README.md
@ -22,7 +22,12 @@ npm install @vue-office/pdf
|
||||
```
|
||||
|
||||
## 使用示例
|
||||
文档预览场景大致可以分为两种：
|
||||
- 有文档网络地址，比如 https://***.docx
|
||||
- 文件上传时预览，此时可以获取文件的ArrayBuffer或Blob
|
||||
|
||||
### docx文档的预览
|
||||
**使用网络地址预览**
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-docx :src="docx" @rendered="rendered"/>
|
||||
@ -38,7 +43,7 @@ export default {
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档地址
|
||||
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
@ -50,6 +55,82 @@ export default {
|
||||
</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文档预览
|
||||
```vue
|
||||
<template>
|
||||
@ -107,4 +188,27 @@ export default {
|
||||
}
|
||||
}
|
||||
</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
2
examples/dist/index.html
vendored
@ -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>
|
||||
File diff suppressed because one or more lines are too long
1
examples/dist/js/index.7d0a43ac.js.map
vendored
Normal file
1
examples/dist/js/index.7d0a43ac.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
1
examples/dist/js/index.ae76ca21.js.map
vendored
1
examples/dist/js/index.ae76ca21.js.map
vendored
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-office",
|
||||
"version": "0.0.12",
|
||||
"version": "0.0.13",
|
||||
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
|
||||
"author": "hit757",
|
||||
"scripts": {
|
||||
|
||||
@ -22,7 +22,7 @@ export default {
|
||||
name: "VueOfficePdf",
|
||||
props: {
|
||||
src: {
|
||||
type: [String, ArrayBuffer]
|
||||
type: [String, ArrayBuffer, Blob]
|
||||
},
|
||||
staticFileUrl:{
|
||||
type: String,
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user