mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-15 07:32:19 +08:00
add: 增加对pdf的预览支持
This commit is contained in:
liyulin
parent
15751a2ef1
commit
12b7ceff71
37
README.md
37
README.md
@ -1,16 +1,18 @@
|
||||
# vue-office
|
||||
|
||||
## 功能介绍
|
||||
- 一站式：提供docx(已支持)、pdf、ppt、excel多种文档的在线预览方案，不必再去四处寻找/集成多种方案
|
||||
- 简单：只需提供文档的src(网络地址)即可完成文档预览，也支持通过文件的arrayBuffer进行预览
|
||||
- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能最优
|
||||
支持多种文件(docx、pdf、ppt、excel)预览的vue组件套装。
|
||||
|
||||
## 功能特色
|
||||
- 一站式：提供docx(已支持)、pdf(已支持)、ppt、excel多种文档的在线预览方案，有它就够了
|
||||
- 简单：只需提供文档的src(网络地址)即可完成文档预览
|
||||
- 体验好：选择每个文档的最佳预览方案，保证用户体验和性能都达到最佳状态
|
||||
|
||||
## 安装
|
||||
```
|
||||
npm install vue-office
|
||||
```
|
||||
|
||||
### docx文档预览
|
||||
### docx文档的预览
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-docx :src="docx"/>
|
||||
@ -32,3 +34,28 @@ export default {
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
### pdf文档预览
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-pdf :src="pdf"/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from 'vue-office/lib/pdf'
|
||||
|
||||
export default {
|
||||
components:{
|
||||
VueOfficePdf
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
@ -2,6 +2,8 @@ const fs = require('fs');
|
||||
const path = require('path');
|
||||
const libPath = path.resolve(__dirname, '../../lib');
|
||||
const docxPath = path.resolve(libPath, 'docx');
|
||||
const pdfPath = path.resolve(libPath, 'pdf');
|
||||
|
||||
fs.copyFileSync(path.resolve(libPath, 'vue-office.umd.min.js'), path.resolve(libPath, 'index.js'));
|
||||
fs.copyFileSync(path.resolve(docxPath, 'vue-office-docx.umd.min.js'), path.resolve(docxPath, 'index.js'));
|
||||
fs.copyFileSync(path.resolve(docxPath, 'vue-office-docx.umd.min.js'), path.resolve(docxPath, 'index.js'));
|
||||
fs.copyFileSync(path.resolve(pdfPath, 'vue-office-pdf.umd.js'), path.resolve(pdfPath, 'index.js'));
|
||||
@ -1,16 +1,19 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<docx-demo />
|
||||
<pdf-demo />
|
||||
<!-- <docx-demo />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
import DocxDemo from "./components/DocxDemo";
|
||||
import PdfDemo from "./components/PdfDemo";
|
||||
export default {
|
||||
name: 'App',
|
||||
components: {
|
||||
DocxDemo
|
||||
DocxDemo,
|
||||
PdfDemo
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
|
||||
@ -1,10 +1,11 @@
|
||||
<template>
|
||||
<div class="pdf-demo">
|
||||
|
||||
<vue-office-pdf src="http://static.shanhuxueyuan.com/test.pdf"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/* eslint-disable */
|
||||
export default {
|
||||
name: "PdfDemo"
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
26
lib/docx/vue-office-docx.umd.min.js
vendored
26
lib/docx/vue-office-docx.umd.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
44
lib/index.js
44
lib/index.js
File diff suppressed because one or more lines are too long
1
lib/pdf/demo.html
Normal file
1
lib/pdf/demo.html
Normal file
@ -0,0 +1 @@
|
||||
<!doctype html><meta charset="utf-8"><title>vue-office-pdf demo</title><script src="./vue-office-pdf.umd.js"></script><link rel="stylesheet" href="./vue-office-pdf.css"><script>console.log(vue-office-pdf)</script>
|
||||
15980
lib/pdf/index.js
Normal file
15980
lib/pdf/index.js
Normal file
File diff suppressed because one or more lines are too long
15969
lib/pdf/vue-office-pdf.common.js
Normal file
15969
lib/pdf/vue-office-pdf.common.js
Normal file
File diff suppressed because one or more lines are too long
1
lib/pdf/vue-office-pdf.common.js.map
Normal file
1
lib/pdf/vue-office-pdf.common.js.map
Normal file
File diff suppressed because one or more lines are too long
15980
lib/pdf/vue-office-pdf.umd.js
Normal file
15980
lib/pdf/vue-office-pdf.umd.js
Normal file
File diff suppressed because one or more lines are too long
1
lib/pdf/vue-office-pdf.umd.js.map
Normal file
1
lib/pdf/vue-office-pdf.umd.js.map
Normal file
File diff suppressed because one or more lines are too long
24
lib/pdf/vue-office-pdf.umd.min.js
vendored
Normal file
24
lib/pdf/vue-office-pdf.umd.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
lib/pdf/vue-office-pdf.umd.min.js.map
Normal file
1
lib/pdf/vue-office-pdf.umd.min.js.map
Normal file
File diff suppressed because one or more lines are too long
59563
lib/vue-office.common.js
59563
lib/vue-office.common.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
59563
lib/vue-office.umd.js
59563
lib/vue-office.umd.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
44
lib/vue-office.umd.min.js
vendored
44
lib/vue-office.umd.min.js
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -6,15 +6,17 @@
|
||||
"author": "hit757",
|
||||
"files": [
|
||||
"lib/index.js",
|
||||
"lib/docx/index.js"
|
||||
"lib/docx/index.js",
|
||||
"lib/pdf/index.js"
|
||||
],
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lib:all": "vue-cli-service build --target lib --name vue-office --dest lib packages/index.js",
|
||||
"lib:docx": "vue-cli-service build --no-clean --target lib --name vue-office-docx --dest lib/docx packages/docx/index.js",
|
||||
"lib:pdf": "vue-cli-service build --no-clean --target lib --name vue-office-pdf --dest lib/pdf packages/pdf/index.js",
|
||||
"lib:generateEntry": "node build/bin/generatePackageEntry.js",
|
||||
"lib": "npm run lib:all && npm run lib:docx && npm run lib:generateEntry"
|
||||
"lib": "npm run lib:all && npm run lib:docx && npm run lib:pdf && npm run lib:generateEntry"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@ -34,6 +36,7 @@
|
||||
"lodash": "^4.17.21",
|
||||
"mammoth": "^1.5.1",
|
||||
"path": "^0.12.7",
|
||||
"pdfjs-dist": "^3.0.279",
|
||||
"stream-browserify": "^3.0.0",
|
||||
"util": "^0.12.5",
|
||||
"vue": "^2.6.14"
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
import VueOfficeDocxCom from './docx'
|
||||
import VueOfficePdfCom from './pdf'
|
||||
|
||||
const components = [
|
||||
VueOfficeDocxCom
|
||||
VueOfficeDocxCom,
|
||||
VueOfficePdfCom
|
||||
]
|
||||
|
||||
const install = function (Vue) {
|
||||
@ -13,7 +15,9 @@ if (typeof window !== 'undefined' && window.Vue) {
|
||||
}
|
||||
|
||||
export const VueOfficeDocx = VueOfficeDocxCom;
|
||||
export const VueOfficePdf = VueOfficePdfCom
|
||||
export default {
|
||||
install,
|
||||
VueOfficeDocx: VueOfficeDocxCom
|
||||
VueOfficeDocx: VueOfficeDocxCom,
|
||||
VueOfficePdf: VueOfficePdfCom
|
||||
}
|
||||
|
||||
7
packages/pdf/index.js
Normal file
7
packages/pdf/index.js
Normal file
@ -0,0 +1,7 @@
|
||||
import VueOfficePdf from './src/main'
|
||||
|
||||
VueOfficePdf.install = function (Vue) {
|
||||
Vue.component(VueOfficePdf.name, VueOfficePdf)
|
||||
}
|
||||
|
||||
export default VueOfficePdf
|
||||
83
packages/pdf/src/main.vue
Normal file
83
packages/pdf/src/main.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div class="vue-office-pdf" ref="vue-office-pdf">
|
||||
<div
|
||||
v-if="numPages"
|
||||
class="vue-office-pdf-wrapper"
|
||||
style="background: gray; padding: 30px 0;position: relative;">
|
||||
<canvas :ref="'canvas'+ page" v-for="page in numPages" :key="page" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {worker} from './worker'
|
||||
const pdfJsLib = require('pdfjs-dist');
|
||||
const PdfJsWorker = `data:text/javascript;base64,${worker}`;
|
||||
pdfJsLib.GlobalWorkerOptions.workerSrc = PdfJsWorker
|
||||
export default {
|
||||
name: "VueOfficePdf",
|
||||
props: {
|
||||
src: {
|
||||
type: [String]
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
document: '',
|
||||
numPages: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.src) {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
if(!this.src){
|
||||
this.numPages = 0
|
||||
return
|
||||
}
|
||||
const loadingTask = pdfJsLib.getDocument(this.src);
|
||||
loadingTask.promise
|
||||
.then((pdfDocument) => {
|
||||
this.document = pdfDocument;
|
||||
this.numPages = pdfDocument.numPages;
|
||||
this.renderPage(1)
|
||||
})
|
||||
},
|
||||
renderPage(num) {
|
||||
this.document.getPage(num).then((pdfPage) => {
|
||||
const viewport = pdfPage.getViewport({scale: window.devicePixelRatio});
|
||||
const canvas = this.$refs['canvas' + num][0];
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
const ctx = canvas.getContext("2d");
|
||||
const renderTask = pdfPage.render({
|
||||
canvasContext: ctx,
|
||||
viewport,
|
||||
});
|
||||
renderTask.promise.then(() => {
|
||||
if (this.numPages > num) {
|
||||
this.renderPage(num + 1);
|
||||
}
|
||||
}).catch(()=>{
|
||||
|
||||
});
|
||||
}).catch(()=>{
|
||||
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
1
packages/pdf/src/worker.js
Normal file
1
packages/pdf/src/worker.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user