mirror of
https://github.com/501351981/vue-office.git
synced 2025-07-25 07:41:42 +08:00
add: vue-press文档
This commit is contained in:
liyulin
parent
9338d7648f
commit
337738a461
41
docs/.vitepress/cache/deps/@theme_index.js
vendored
Normal file
41
docs/.vitepress/cache/deps/@theme_index.js
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
// ../node_modules/vitepress/dist/client/theme-default/index.js
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/fonts.css";
|
||||
|
||||
// ../node_modules/vitepress/dist/client/theme-default/without-fonts.js
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/vars.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/base.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/utils.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/components/custom-block.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/components/vp-code-group.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/components/vp-doc.css";
|
||||
import "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/styles/components/vp-sponsor.css";
|
||||
import VPBadge from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPBadge.vue";
|
||||
import Layout from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/Layout.vue";
|
||||
import { default as default2 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPHomeHero.vue";
|
||||
import { default as default3 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPHomeFeatures.vue";
|
||||
import { default as default4 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPHomeSponsors.vue";
|
||||
import { default as default5 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPDocAsideSponsors.vue";
|
||||
import { default as default6 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPTeamPage.vue";
|
||||
import { default as default7 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageTitle.vue";
|
||||
import { default as default8 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPTeamPageSection.vue";
|
||||
import { default as default9 } from "/Users/liyulin/Documents/my_code/vue-office/node_modules/vitepress/dist/client/theme-default/components/VPTeamMembers.vue";
|
||||
var theme = {
|
||||
Layout,
|
||||
enhanceApp: ({ app }) => {
|
||||
app.component("Badge", VPBadge);
|
||||
}
|
||||
};
|
||||
var without_fonts_default = theme;
|
||||
export {
|
||||
default5 as VPDocAsideSponsors,
|
||||
default3 as VPHomeFeatures,
|
||||
default2 as VPHomeHero,
|
||||
default4 as VPHomeSponsors,
|
||||
default9 as VPTeamMembers,
|
||||
default6 as VPTeamPage,
|
||||
default8 as VPTeamPageSection,
|
||||
default7 as VPTeamPageTitle,
|
||||
without_fonts_default as default
|
||||
};
|
||||
//# sourceMappingURL=@theme_index.js.map
|
||||
7
docs/.vitepress/cache/deps/@theme_index.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/@theme_index.js.map
vendored
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"version": 3,
|
||||
"sources": ["../../../../node_modules/vitepress/dist/client/theme-default/index.js", "../../../../node_modules/vitepress/dist/client/theme-default/without-fonts.js"],
|
||||
"sourcesContent": ["import './styles/fonts.css';\nexport * from './without-fonts';\nexport { default as default } from './without-fonts';\n", "import './styles/vars.css';\nimport './styles/base.css';\nimport './styles/utils.css';\nimport './styles/components/custom-block.css';\nimport './styles/components/vp-code.css';\nimport './styles/components/vp-code-group.css';\nimport './styles/components/vp-doc.css';\nimport './styles/components/vp-sponsor.css';\nimport VPBadge from './components/VPBadge.vue';\nimport Layout from './Layout.vue';\n// Note: if we add more optional components here, i.e. components that are not\n// used in the theme by default unless the user imports them, make sure to update\n// the `lazyDefaultThemeComponentsRE` regex in src/node/build/bundle.ts.\nexport { default as VPHomeHero } from './components/VPHomeHero.vue';\nexport { default as VPHomeFeatures } from './components/VPHomeFeatures.vue';\nexport { default as VPHomeSponsors } from './components/VPHomeSponsors.vue';\nexport { default as VPDocAsideSponsors } from './components/VPDocAsideSponsors.vue';\nexport { default as VPTeamPage } from './components/VPTeamPage.vue';\nexport { default as VPTeamPageTitle } from './components/VPTeamPageTitle.vue';\nexport { default as VPTeamPageSection } from './components/VPTeamPageSection.vue';\nexport { default as VPTeamMembers } from './components/VPTeamMembers.vue';\nconst theme = {\n Layout,\n enhanceApp: ({ app }) => {\n app.component('Badge', VPBadge);\n }\n};\nexport default theme;\n"],
|
||||
"mappings": ";AAAA,OAAO;;;ACAP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO;AACP,OAAO,aAAa;AACpB,OAAO,YAAY;AAInB,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAiC;AAC1C,SAAoB,WAAXA,gBAAqC;AAC9C,SAAoB,WAAXA,gBAA6B;AACtC,SAAoB,WAAXA,gBAAkC;AAC3C,SAAoB,WAAXA,gBAAoC;AAC7C,SAAoB,WAAXA,gBAAgC;AACzC,IAAM,QAAQ;AAAA,EACV;AAAA,EACA,YAAY,CAAC,EAAE,IAAI,MAAM;AACrB,QAAI,UAAU,SAAS,OAAO;AAAA,EAClC;AACJ;AACA,IAAO,wBAAQ;",
|
||||
"names": ["default"]
|
||||
}
|
||||
162
docs/.vitepress/cache/deps/@vue_devtools-api.js
vendored
Normal file
162
docs/.vitepress/cache/deps/@vue_devtools-api.js
vendored
Normal file
@ -0,0 +1,162 @@
|
||||
// ../node_modules/@vue/devtools-api/lib/esm/env.js
|
||||
function getDevtoolsGlobalHook() {
|
||||
return getTarget().__VUE_DEVTOOLS_GLOBAL_HOOK__;
|
||||
}
|
||||
function getTarget() {
|
||||
return typeof navigator !== "undefined" && typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : {};
|
||||
}
|
||||
var isProxyAvailable = typeof Proxy === "function";
|
||||
|
||||
// ../node_modules/@vue/devtools-api/lib/esm/const.js
|
||||
var HOOK_SETUP = "devtools-plugin:setup";
|
||||
var HOOK_PLUGIN_SETTINGS_SET = "plugin:settings:set";
|
||||
|
||||
// ../node_modules/@vue/devtools-api/lib/esm/time.js
|
||||
var supported;
|
||||
var perf;
|
||||
function isPerformanceSupported() {
|
||||
var _a;
|
||||
if (supported !== void 0) {
|
||||
return supported;
|
||||
}
|
||||
if (typeof window !== "undefined" && window.performance) {
|
||||
supported = true;
|
||||
perf = window.performance;
|
||||
} else if (typeof global !== "undefined" && ((_a = global.perf_hooks) === null || _a === void 0 ? void 0 : _a.performance)) {
|
||||
supported = true;
|
||||
perf = global.perf_hooks.performance;
|
||||
} else {
|
||||
supported = false;
|
||||
}
|
||||
return supported;
|
||||
}
|
||||
function now() {
|
||||
return isPerformanceSupported() ? perf.now() : Date.now();
|
||||
}
|
||||
|
||||
// ../node_modules/@vue/devtools-api/lib/esm/proxy.js
|
||||
var ApiProxy = class {
|
||||
constructor(plugin, hook) {
|
||||
this.target = null;
|
||||
this.targetQueue = [];
|
||||
this.onQueue = [];
|
||||
this.plugin = plugin;
|
||||
this.hook = hook;
|
||||
const defaultSettings = {};
|
||||
if (plugin.settings) {
|
||||
for (const id in plugin.settings) {
|
||||
const item = plugin.settings[id];
|
||||
defaultSettings[id] = item.defaultValue;
|
||||
}
|
||||
}
|
||||
const localSettingsSaveId = `__vue-devtools-plugin-settings__${plugin.id}`;
|
||||
let currentSettings = Object.assign({}, defaultSettings);
|
||||
try {
|
||||
const raw = localStorage.getItem(localSettingsSaveId);
|
||||
const data = JSON.parse(raw);
|
||||
Object.assign(currentSettings, data);
|
||||
} catch (e) {
|
||||
}
|
||||
this.fallbacks = {
|
||||
getSettings() {
|
||||
return currentSettings;
|
||||
},
|
||||
setSettings(value) {
|
||||
try {
|
||||
localStorage.setItem(localSettingsSaveId, JSON.stringify(value));
|
||||
} catch (e) {
|
||||
}
|
||||
currentSettings = value;
|
||||
},
|
||||
now() {
|
||||
return now();
|
||||
}
|
||||
};
|
||||
if (hook) {
|
||||
hook.on(HOOK_PLUGIN_SETTINGS_SET, (pluginId, value) => {
|
||||
if (pluginId === this.plugin.id) {
|
||||
this.fallbacks.setSettings(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
this.proxiedOn = new Proxy({}, {
|
||||
get: (_target, prop) => {
|
||||
if (this.target) {
|
||||
return this.target.on[prop];
|
||||
} else {
|
||||
return (...args) => {
|
||||
this.onQueue.push({
|
||||
method: prop,
|
||||
args
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
this.proxiedTarget = new Proxy({}, {
|
||||
get: (_target, prop) => {
|
||||
if (this.target) {
|
||||
return this.target[prop];
|
||||
} else if (prop === "on") {
|
||||
return this.proxiedOn;
|
||||
} else if (Object.keys(this.fallbacks).includes(prop)) {
|
||||
return (...args) => {
|
||||
this.targetQueue.push({
|
||||
method: prop,
|
||||
args,
|
||||
resolve: () => {
|
||||
}
|
||||
});
|
||||
return this.fallbacks[prop](...args);
|
||||
};
|
||||
} else {
|
||||
return (...args) => {
|
||||
return new Promise((resolve) => {
|
||||
this.targetQueue.push({
|
||||
method: prop,
|
||||
args,
|
||||
resolve
|
||||
});
|
||||
});
|
||||
};
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
async setRealTarget(target) {
|
||||
this.target = target;
|
||||
for (const item of this.onQueue) {
|
||||
this.target.on[item.method](...item.args);
|
||||
}
|
||||
for (const item of this.targetQueue) {
|
||||
item.resolve(await this.target[item.method](...item.args));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ../node_modules/@vue/devtools-api/lib/esm/index.js
|
||||
function setupDevtoolsPlugin(pluginDescriptor, setupFn) {
|
||||
const descriptor = pluginDescriptor;
|
||||
const target = getTarget();
|
||||
const hook = getDevtoolsGlobalHook();
|
||||
const enableProxy = isProxyAvailable && descriptor.enableEarlyProxy;
|
||||
if (hook && (target.__VUE_DEVTOOLS_PLUGIN_API_AVAILABLE__ || !enableProxy)) {
|
||||
hook.emit(HOOK_SETUP, pluginDescriptor, setupFn);
|
||||
} else {
|
||||
const proxy = enableProxy ? new ApiProxy(descriptor, hook) : null;
|
||||
const list = target.__VUE_DEVTOOLS_PLUGINS__ = target.__VUE_DEVTOOLS_PLUGINS__ || [];
|
||||
list.push({
|
||||
pluginDescriptor: descriptor,
|
||||
setupFn,
|
||||
proxy
|
||||
});
|
||||
if (proxy)
|
||||
setupFn(proxy.proxiedTarget);
|
||||
}
|
||||
}
|
||||
export {
|
||||
isPerformanceSupported,
|
||||
now,
|
||||
setupDevtoolsPlugin
|
||||
};
|
||||
//# sourceMappingURL=@vue_devtools-api.js.map
|
||||
7
docs/.vitepress/cache/deps/@vue_devtools-api.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/@vue_devtools-api.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
25
docs/.vitepress/cache/deps/_metadata.json
vendored
Normal file
25
docs/.vitepress/cache/deps/_metadata.json
vendored
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"hash": "eea9f1e3",
|
||||
"browserHash": "cab3c232",
|
||||
"optimized": {
|
||||
"vue": {
|
||||
"src": "../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
|
||||
"file": "vue.js",
|
||||
"fileHash": "fba0bc91",
|
||||
"needsInterop": false
|
||||
},
|
||||
"@vue/devtools-api": {
|
||||
"src": "../../../../node_modules/@vue/devtools-api/lib/esm/index.js",
|
||||
"file": "@vue_devtools-api.js",
|
||||
"fileHash": "5ed17452",
|
||||
"needsInterop": false
|
||||
},
|
||||
"@theme/index": {
|
||||
"src": "../../../../node_modules/vitepress/dist/client/theme-default/index.js",
|
||||
"file": "@theme_index.js",
|
||||
"fileHash": "afff9c20",
|
||||
"needsInterop": false
|
||||
}
|
||||
},
|
||||
"chunks": {}
|
||||
}
|
||||
1
docs/.vitepress/cache/deps/package.json
vendored
Normal file
1
docs/.vitepress/cache/deps/package.json
vendored
Normal file
@ -0,0 +1 @@
|
||||
{"type":"module"}
|
||||
9516
docs/.vitepress/cache/deps/vue.js
vendored
Normal file
9516
docs/.vitepress/cache/deps/vue.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
7
docs/.vitepress/cache/deps/vue.js.map
vendored
Normal file
7
docs/.vitepress/cache/deps/vue.js.map
vendored
Normal file
File diff suppressed because one or more lines are too long
52
docs/.vitepress/config.js
Normal file
52
docs/.vitepress/config.js
Normal file
@ -0,0 +1,52 @@
|
||||
import { defineConfig } from 'vitepress'
|
||||
const path = require('path')
|
||||
// https://vitepress.dev/reference/site-config
|
||||
export default defineConfig({
|
||||
title: "vue-office",
|
||||
description: "更简单的office文件预览",
|
||||
themeConfig: {
|
||||
// https://vitepress.dev/reference/default-theme-config
|
||||
nav: [
|
||||
{ text: '指南', link: '/guide/' },
|
||||
{ text: '配置参考', link: '/config/' }
|
||||
],
|
||||
outlineTitle:'跳转到',
|
||||
docFooter: {
|
||||
next: '下一页',
|
||||
prev:'上一页'
|
||||
},
|
||||
sidebar: {
|
||||
'/guide': [
|
||||
{
|
||||
text: '指南',
|
||||
items: [
|
||||
{ text: '快速上手', link: '/guide/' },
|
||||
{ text: 'docx文件预览', link: '/guide/preview-docx' },
|
||||
{ text: 'xlsx文件预览', link: '/guide/preview-xlsx' },
|
||||
{ text: 'pdf文件预览', link: '/guide/preview-pdf' },
|
||||
{ text: '常见问题', link: '/guide/faq' },
|
||||
{ text: '联系我', link: '/guide/contact' }
|
||||
]
|
||||
}
|
||||
],
|
||||
'/config':[
|
||||
{
|
||||
text: '配置参考',
|
||||
items: [
|
||||
{ text: '属性', link: '/config/' },
|
||||
{ text: '事件', link: '/config/event' },
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
socialLinks: [
|
||||
{ icon: 'github', link: 'https://github.com/501351981/vue-office' }
|
||||
]
|
||||
},
|
||||
configureWebpack: (config, isServer) => {
|
||||
console.log(config.output.path)
|
||||
config.output.path = path.resolve(__dirname, '../../examples/docs')
|
||||
// return config
|
||||
}
|
||||
})
|
||||
11
docs/config/event.md
Normal file
11
docs/config/event.md
Normal file
@ -0,0 +1,11 @@
|
||||
# 事件
|
||||
|
||||
## rendered
|
||||
|
||||
渲染完成事件，可以在该事件中处理关闭loading操作等。
|
||||
|
||||
首次渲染完成及每次src变化之后渲染完成都会触发该事件。
|
||||
|
||||
## error
|
||||
|
||||
失败事件，各种失败都会触发该事件，包括网络请求失败，渲染失败等
|
||||
34
docs/config/index.md
Normal file
34
docs/config/index.md
Normal file
@ -0,0 +1,34 @@
|
||||
# 属性
|
||||
|
||||
## src
|
||||
|
||||
- 类型：String, ArrayBuffer, Blob
|
||||
|
||||
文档地址，文件在CDN或服务器上的地址，或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。
|
||||
|
||||
## request-options
|
||||
- 类型：Object
|
||||
|
||||
如果属性src是个文件地址，组件内部会通过window.fetch进行请求，对应window.fetch的请求参数，可以用来设置header等请求信息。
|
||||
|
||||
|
||||
## options [xlsx特有属性]
|
||||
|
||||
- 类型： Object
|
||||
|
||||
excel相关的配置，目前支持配置项很少。
|
||||
|
||||
minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
|
||||
|
||||
```json
|
||||
{
|
||||
"minColLength": 20
|
||||
}
|
||||
```
|
||||
|
||||
## staticFileUrl [pdf特有属性]
|
||||
- 类型： String
|
||||
|
||||
pdf渲染时可能会请求一些bcmap文件，这些文件默认从 https://unpkg.com/pdfjs-dist@3.1.81/ 加载，但是可能存在网络不通问题，如果遇到这种问题，可以将这些文件放到自己静态目录，然后修改该属性，告诉组件去这里请求bcmap文件。
|
||||
|
||||
涉及的文件存放在当前github项目中examples/public/cmaps目录下，可将cmaps目录复制到你的静态服务目录下，然后修改staticFileUrl为cmaps文件夹对应的父地址，必须已http或https开头，如 http://yourdomain/static/
|
||||
19
docs/guide/contact.md
Normal file
19
docs/guide/contact.md
Normal file
@ -0,0 +1,19 @@
|
||||
# 联系我
|
||||
## 提Issue
|
||||
|
||||
如果您遇到了问题，欢迎提Issue，同时请您尽可能详细的描述您遇到的问题，包括不限于
|
||||
- 您使用的是哪个库： @vue-office/docx、@vue-office/excel、@vue-office/pdf
|
||||
- 您使用的环境：APP or Web，PC or 移动端，如果是浏览器兼容问题，请提供您的浏览器版本
|
||||
- 如果有错误，请粘贴详细的报错信息
|
||||
|
||||
详细的描述有助于我尽快定位问题，因为平时工作很忙，时间很有限，感谢理解
|
||||
|
||||
## 赞助和微信交流
|
||||
|
||||
**_如果该项目确实帮助到了您_**，欢迎赞助，以鼓励我将更多的休息时间，投入到该项目的优化中，也欢迎赞助后添加微信交流：\_hit757_
|
||||
|
||||
<img src="https://501351981.github.io/vue-office/examples/public/static/wx.png" alt="赞助二维码" width="260"/>
|
||||
|
||||
::: tip 跪求一赞
|
||||
如果您觉得该项目帮助了您，还请伸出贵手帮忙点赞支持，万分感谢~~
|
||||
:::
|
||||
15
docs/guide/faq.md
Normal file
15
docs/guide/faq.md
Normal file
File diff suppressed because one or more lines are too long
169
docs/guide/index.md
Normal file
169
docs/guide/index.md
Normal file
@ -0,0 +1,169 @@
|
||||
# vue-office简介
|
||||
|
||||
vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。
|
||||
|
||||
目标是成为使用最简单，功能最强大的文件预览库
|
||||
|
||||
[查看演示demo](https://501351981.github.io/vue-office/examples/dist/)
|
||||
|
||||
## 功能特色
|
||||
- 一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了
|
||||
- 使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式
|
||||
- 支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容
|
||||
|
||||
|
||||
## 安装
|
||||
```shell
|
||||
#docx文档预览组件
|
||||
npm install @vue-office/docx vue-demi
|
||||
|
||||
#excel文档预览组件
|
||||
npm install @vue-office/excel vue-demi
|
||||
|
||||
#pdf文档预览组件
|
||||
npm install @vue-office/pdf vue-demi
|
||||
```
|
||||
如果是vue2.6版本或以下还需要额外安装 @vue/composition-api
|
||||
```shell
|
||||
npm install @vue/composition-api
|
||||
```
|
||||
|
||||
|
||||
## 使用网络地址预览
|
||||
|
||||
docx、xlsx、pdf三种文件的预览方式几乎一致，我们先以docx文档的预览为例，介绍下组件用法。
|
||||
|
||||
docx的预览如下：
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-docx
|
||||
:src="docx"
|
||||
style="height: 100vh;"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
//引入相关样式
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficeDocx
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderedHandler() {
|
||||
console.log("渲染完成")
|
||||
},
|
||||
errorHandler() {
|
||||
console.log("渲染失败")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
可以看出，非常的简单，只需要指定文档的src远程地址即可。
|
||||
|
||||
可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。
|
||||
|
||||
组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。
|
||||
|
||||
|
||||
## 上传文件预览
|
||||
|
||||
预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。
|
||||
|
||||
我们以ElementUI的上传组件作为示例，当然也可以使用普通的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'
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficeDocx
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//在beforeUpload中读取文件内容
|
||||
beforeUpload(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(file);
|
||||
reader.onload = (loadEvent) => {
|
||||
let arrayBuffer = loadEvent.target.result;
|
||||
this.src = arrayBuffer
|
||||
};
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。
|
||||
|
||||
如果是原生的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'
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
142
docs/guide/preview-docx.md
Normal file
142
docs/guide/preview-docx.md
Normal file
@ -0,0 +1,142 @@
|
||||
# docx文件预览
|
||||
|
||||
::: warning
|
||||
目前只支持docx文件预览，不支持doc文件。
|
||||
:::
|
||||
|
||||
这部分内容和快速上手中docx预览内容一样，看过的可以跳过
|
||||
|
||||
## 使用网络地址预览
|
||||
|
||||
通过配置docx文件的远程地址实现预览，这种预览方式最简单。
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-docx
|
||||
:src="docx"
|
||||
style="height: 100vh;"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//引入VueOfficeDocx组件
|
||||
import VueOfficeDocx from '@vue-office/docx'
|
||||
//引入相关样式
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficeDocx
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
docx: 'http://static.shanhuxueyuan.com/test6.docx' //设置文档网络地址，可以是相对地址
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderedHandler() {
|
||||
console.log("渲染完成")
|
||||
},
|
||||
errorHandler() {
|
||||
console.log("渲染失败")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。
|
||||
|
||||
组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。
|
||||
|
||||
|
||||
## 上传文件预览
|
||||
|
||||
预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。
|
||||
|
||||
我们以ElementUI的上传组件作为示例，当然也可以使用普通的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'
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficeDocx
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
src: '',
|
||||
fileList: []
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//在beforeUpload中读取文件内容
|
||||
beforeUpload(file) {
|
||||
let reader = new FileReader();
|
||||
reader.readAsArrayBuffer(file);
|
||||
reader.onload = (loadEvent) => {
|
||||
let arrayBuffer = loadEvent.target.result;
|
||||
this.src = arrayBuffer
|
||||
};
|
||||
return false
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。
|
||||
|
||||
如果是原生的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'
|
||||
import '@vue-office/docx/lib/index.css'
|
||||
|
||||
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>
|
||||
```
|
||||
42
docs/guide/preview-pdf.md
Normal file
42
docs/guide/preview-pdf.md
Normal file
@ -0,0 +1,42 @@
|
||||
# pdf文件预览
|
||||
|
||||
## 使用网络地址预览
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-pdf
|
||||
:src="pdf"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//引入VueOfficePdf组件
|
||||
import VueOfficePdf from '@vue-office/pdf'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficePdf
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
pdf: 'http://static.shanhuxueyuan.com/test.pdf' //设置文档地址
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderedHandler() {
|
||||
console.log("渲染完成")
|
||||
},
|
||||
errorHandler() {
|
||||
console.log("渲染失败")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
## 上传文件预览
|
||||
|
||||
和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。
|
||||
47
docs/guide/preview-xlsx.md
Normal file
47
docs/guide/preview-xlsx.md
Normal file
@ -0,0 +1,47 @@
|
||||
# xlsx文件预览
|
||||
::: warning
|
||||
目前只支持xlsx文件预览，不支持xls文件。
|
||||
:::
|
||||
|
||||
## 使用网络地址预览
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<vue-office-excel
|
||||
:src="excel"
|
||||
style="height: 100vh;"
|
||||
@rendered="renderedHandler"
|
||||
@error="errorHandler"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
//引入VueOfficeExcel组件
|
||||
import VueOfficeExcel from '@vue-office/excel'
|
||||
//引入相关样式
|
||||
import '@vue-office/excel/lib/index.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
VueOfficeExcel
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
excel: 'http://static.shanhuxueyuan.com/demo/excel.xlsx'//设置文档地址
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
renderedHandler() {
|
||||
console.log("渲染完成")
|
||||
},
|
||||
errorHandler() {
|
||||
console.log("渲染失败")
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
## 上传文件预览
|
||||
|
||||
和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。
|
||||
25
docs/index.md
Normal file
25
docs/index.md
Normal file
@ -0,0 +1,25 @@
|
||||
---
|
||||
# https://vitepress.dev/reference/default-theme-home-page
|
||||
layout: home
|
||||
|
||||
hero:
|
||||
name: "vue-office"
|
||||
text: "更易用的文件预览"
|
||||
tagline: 支持docx、xlsx、pdf文件预览
|
||||
actions:
|
||||
- theme: brand
|
||||
text: 指南
|
||||
link: /guide/
|
||||
- theme: alt
|
||||
text: 配置参考
|
||||
link: /config/
|
||||
|
||||
features:
|
||||
- title: 一站式
|
||||
details: 提供docx、xlsx、pdf 3种文档的在线预览方案
|
||||
- title: 使用简单
|
||||
details: 只需提供文档的src即可完成文档预览，支持远程地址、ArrayBuffer、Blob多种格式
|
||||
- title: 支持样式
|
||||
details: 不仅能预览内容，也支持文档样式，最大限度还原office文件内容
|
||||
---
|
||||
|
||||
175
docs/package-lock.json
generated
Normal file
175
docs/package-lock.json
generated
Normal file
@ -0,0 +1,175 @@
|
||||
{
|
||||
"requires": true,
|
||||
"lockfileVersion": 1,
|
||||
"dependencies": {
|
||||
"@babel/parser": {
|
||||
"version": "7.21.3",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@babel%2fparser/-/parser-7.21.3.tgz",
|
||||
"integrity": "sha512-lobG0d7aOfQRXh8AyklEAgZGvA4FShxo6xQbUrrT/cNBPUdIDojlokwJsQyCC/eKia7ifqM0yP+2DRZ4WKw2RQ=="
|
||||
},
|
||||
"@vue/compiler-core": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fcompiler-core/-/compiler-core-3.2.47.tgz",
|
||||
"integrity": "sha512-p4D7FDnQb7+YJmO2iPEv0SQNeNzcbHdGByJDsT4lynf63AFkOTFN07HsiRSvjGo0QrxR/o3d0hUyNCUnBU2Tig==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.16.4",
|
||||
"@vue/shared": "3.2.47",
|
||||
"estree-walker": "^2.0.2",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-dom": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fcompiler-dom/-/compiler-dom-3.2.47.tgz",
|
||||
"integrity": "sha512-dBBnEHEPoftUiS03a4ggEig74J2YBZ2UIeyfpcRM2tavgMWo4bsEfgCGsu+uJIL/vax9S+JztH8NmQerUo7shQ==",
|
||||
"requires": {
|
||||
"@vue/compiler-core": "3.2.47",
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-sfc": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fcompiler-sfc/-/compiler-sfc-3.2.47.tgz",
|
||||
"integrity": "sha512-rog05W+2IFfxjMcFw10tM9+f7i/+FFpZJJ5XHX72NP9eC2uRD+42M3pYcQqDXVYoj74kHMSEdQ/WmCjt8JFksQ==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.16.4",
|
||||
"@vue/compiler-core": "3.2.47",
|
||||
"@vue/compiler-dom": "3.2.47",
|
||||
"@vue/compiler-ssr": "3.2.47",
|
||||
"@vue/reactivity-transform": "3.2.47",
|
||||
"@vue/shared": "3.2.47",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7",
|
||||
"postcss": "^8.1.10",
|
||||
"source-map": "^0.6.1"
|
||||
}
|
||||
},
|
||||
"@vue/compiler-ssr": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fcompiler-ssr/-/compiler-ssr-3.2.47.tgz",
|
||||
"integrity": "sha512-wVXC+gszhulcMD8wpxMsqSOpvDZ6xKXSVWkf50Guf/S+28hTAXPDYRTbLQ3EDkOP5Xz/+SY37YiwDquKbJOgZw==",
|
||||
"requires": {
|
||||
"@vue/compiler-dom": "3.2.47",
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/reactivity": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2freactivity/-/reactivity-3.2.47.tgz",
|
||||
"integrity": "sha512-7khqQ/75oyyg+N/e+iwV6lpy1f5wq759NdlS1fpAhFXa8VeAIKGgk2E/C4VF59lx5b+Ezs5fpp/5WsRYXQiKxQ==",
|
||||
"requires": {
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/reactivity-transform": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2freactivity-transform/-/reactivity-transform-3.2.47.tgz",
|
||||
"integrity": "sha512-m8lGXw8rdnPVVIdIFhf0LeQ/ixyHkH5plYuS83yop5n7ggVJU+z5v0zecwEnX7fa7HNLBhh2qngJJkxpwEEmYA==",
|
||||
"requires": {
|
||||
"@babel/parser": "^7.16.4",
|
||||
"@vue/compiler-core": "3.2.47",
|
||||
"@vue/shared": "3.2.47",
|
||||
"estree-walker": "^2.0.2",
|
||||
"magic-string": "^0.25.7"
|
||||
}
|
||||
},
|
||||
"@vue/runtime-core": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fruntime-core/-/runtime-core-3.2.47.tgz",
|
||||
"integrity": "sha512-RZxbLQIRB/K0ev0K9FXhNbBzT32H9iRtYbaXb0ZIz2usLms/D55dJR2t6cIEUn6vyhS3ALNvNthI+Q95C+NOpA==",
|
||||
"requires": {
|
||||
"@vue/reactivity": "3.2.47",
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/runtime-dom": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fruntime-dom/-/runtime-dom-3.2.47.tgz",
|
||||
"integrity": "sha512-ArXrFTjS6TsDei4qwNvgrdmHtD930KgSKGhS5M+j8QxXrDJYLqYw4RRcDy1bz1m1wMmb6j+zGLifdVHtkXA7gA==",
|
||||
"requires": {
|
||||
"@vue/runtime-core": "3.2.47",
|
||||
"@vue/shared": "3.2.47",
|
||||
"csstype": "^2.6.8"
|
||||
}
|
||||
},
|
||||
"@vue/server-renderer": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fserver-renderer/-/server-renderer-3.2.47.tgz",
|
||||
"integrity": "sha512-dN9gc1i8EvmP9RCzvneONXsKfBRgqFeFZLurmHOveL7oH6HiFXJw5OGu294n1nHc/HMgTy6LulU/tv5/A7f/LA==",
|
||||
"requires": {
|
||||
"@vue/compiler-ssr": "3.2.47",
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
},
|
||||
"@vue/shared": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/@vue%2fshared/-/shared-3.2.47.tgz",
|
||||
"integrity": "sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ=="
|
||||
},
|
||||
"csstype": {
|
||||
"version": "2.6.21",
|
||||
"resolved": "http://registry.npm.baidu-int.com/csstype/-/csstype-2.6.21.tgz",
|
||||
"integrity": "sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w=="
|
||||
},
|
||||
"estree-walker": {
|
||||
"version": "2.0.2",
|
||||
"resolved": "http://registry.npm.baidu-int.com/estree-walker/-/estree-walker-2.0.2.tgz",
|
||||
"integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
|
||||
},
|
||||
"magic-string": {
|
||||
"version": "0.25.9",
|
||||
"resolved": "http://registry.npm.baidu-int.com/magic-string/-/magic-string-0.25.9.tgz",
|
||||
"integrity": "sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==",
|
||||
"requires": {
|
||||
"sourcemap-codec": "^1.4.8"
|
||||
}
|
||||
},
|
||||
"nanoid": {
|
||||
"version": "3.3.4",
|
||||
"resolved": "http://registry.npm.baidu-int.com/nanoid/-/nanoid-3.3.4.tgz",
|
||||
"integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw=="
|
||||
},
|
||||
"picocolors": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "http://registry.npm.baidu-int.com/picocolors/-/picocolors-1.0.0.tgz",
|
||||
"integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ=="
|
||||
},
|
||||
"postcss": {
|
||||
"version": "8.4.21",
|
||||
"resolved": "http://registry.npm.baidu-int.com/postcss/-/postcss-8.4.21.tgz",
|
||||
"integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==",
|
||||
"requires": {
|
||||
"nanoid": "^3.3.4",
|
||||
"picocolors": "^1.0.0",
|
||||
"source-map-js": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "http://registry.npm.baidu-int.com/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
|
||||
},
|
||||
"source-map-js": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "http://registry.npm.baidu-int.com/source-map-js/-/source-map-js-1.0.2.tgz",
|
||||
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
|
||||
},
|
||||
"sourcemap-codec": {
|
||||
"version": "1.4.8",
|
||||
"resolved": "http://registry.npm.baidu-int.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
|
||||
"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
|
||||
},
|
||||
"vue": {
|
||||
"version": "3.2.47",
|
||||
"resolved": "http://registry.npm.baidu-int.com/vue/-/vue-3.2.47.tgz",
|
||||
"integrity": "sha512-60188y/9Dc9WVrAZeUVSDxRQOZ+z+y5nO2ts9jWXSTkMvayiWxCWOWtBQoYjLeccfXkiiPZWAHcV+WTPhkqJHQ==",
|
||||
"requires": {
|
||||
"@vue/compiler-dom": "3.2.47",
|
||||
"@vue/compiler-sfc": "3.2.47",
|
||||
"@vue/runtime-dom": "3.2.47",
|
||||
"@vue/server-renderer": "3.2.47",
|
||||
"@vue/shared": "3.2.47"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
10
docs/package.json
Normal file
10
docs/package.json
Normal file
@ -0,0 +1,10 @@
|
||||
{
|
||||
"scripts": {
|
||||
"docs:dev": "vitepress dev",
|
||||
"docs:build": "vitepress build",
|
||||
"docs:preview": "vitepress preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue": "^3.2.47"
|
||||
}
|
||||
}
|
||||
19
examples/docs/404.html
Normal file
19
examples/docs/404.html
Normal file
File diff suppressed because one or more lines are too long
1
examples/docs/assets/app.831c4c12.js
Normal file
1
examples/docs/assets/app.831c4c12.js
Normal file
@ -0,0 +1 @@
|
||||
import{d as p,K as o,a4 as i,u,s as c,q as l,a5 as d,a6 as f,a7 as m,a8 as h,a9 as A,aa as g,ab as P,ac as v,ad as y,ae as C,af as w,ag as _,ah as b,ai as E}from"./chunks/framework.3816f80c.js";import{t as R}from"./chunks/theme.3c6138c2.js";function r(e){if(e.extends){const a=r(e.extends);return{...a,...e,async enhanceApp(t){a.enhanceApp&&await a.enhanceApp(t),e.enhanceApp&&await e.enhanceApp(t)}}}return e}const n=r(R),D=p({name:"VitePressApp",setup(){const{site:e}=u();return c(()=>{l(()=>{document.documentElement.lang=e.value.lang,document.documentElement.dir=e.value.dir})}),d(),f(),m(),n.setup&&n.setup(),()=>h(n.Layout)}});async function O(){const e=T(),a=S();a.provide(A,e);const t=g(e.route);return a.provide(P,t),a.component("Content",v),a.component("ClientOnly",y),Object.defineProperties(a.config.globalProperties,{$frontmatter:{get(){return t.frontmatter.value}},$params:{get(){return t.page.value.params}}}),n.enhanceApp&&await n.enhanceApp({app:a,router:e,siteData:C}),{app:a,router:e,data:t}}function S(){return w(D)}function T(){let e=o,a;return _(t=>{let s=b(t);return e&&(a=s),(e||a===s)&&(s=s.replace(/\.js$/,".lean.js")),o&&(e=!1),E(()=>import(s),[])},n.NotFound)}o&&O().then(({app:e,router:a,data:t})=>{a.go().then(()=>{i(a.route,t.site),e.mount("#app")})});export{O as createApp};
|
||||
2
examples/docs/assets/chunks/framework.3816f80c.js
Normal file
2
examples/docs/assets/chunks/framework.3816f80c.js
Normal file
File diff suppressed because one or more lines are too long
7
examples/docs/assets/chunks/theme.3c6138c2.js
Normal file
7
examples/docs/assets/chunks/theme.3c6138c2.js
Normal file
File diff suppressed because one or more lines are too long
1
examples/docs/assets/config_event.md.c79800d4.js
Normal file
1
examples/docs/assets/config_event.md.c79800d4.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as r,o as a,Q as t}from"./chunks/framework.3816f80c.js";const m=JSON.parse('{"title":"事件","description":"","frontmatter":{},"headers":[],"relativePath":"config/event.md"}'),o={name:"config/event.md"},n=t('<h1 id="事件" tabindex="-1">事件 <a class="header-anchor" href="#事件" aria-label="Permalink to "事件""></a></h1><h2 id="rendered" tabindex="-1">rendered <a class="header-anchor" href="#rendered" aria-label="Permalink to "rendered""></a></h2><p>渲染完成事件，可以在该事件中处理关闭loading操作等。</p><p>首次渲染完成及每次src变化之后渲染完成都会触发该事件。</p><h2 id="error" tabindex="-1">error <a class="header-anchor" href="#error" aria-label="Permalink to "error""></a></h2><p>失败事件，各种失败都会触发该事件，包括网络请求失败，渲染失败等</p>',6),d=[n];function c(s,i,_,l,h,p){return a(),r("div",null,d)}const u=e(o,[["render",c]]);export{m as __pageData,u as default};
|
||||
1
examples/docs/assets/config_event.md.c79800d4.lean.js
Normal file
1
examples/docs/assets/config_event.md.c79800d4.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as r,o as a,Q as t}from"./chunks/framework.3816f80c.js";const m=JSON.parse('{"title":"事件","description":"","frontmatter":{},"headers":[],"relativePath":"config/event.md"}'),o={name:"config/event.md"},n=t("",6),d=[n];function c(s,i,_,l,h,p){return a(),r("div",null,d)}const u=e(o,[["render",c]]);export{m as __pageData,u as default};
|
||||
4
examples/docs/assets/config_index.md.d8db770a.js
Normal file
4
examples/docs/assets/config_index.md.d8db770a.js
Normal file
@ -0,0 +1,4 @@
|
||||
import{_ as a,c as e,o as s,Q as t}from"./chunks/framework.3816f80c.js";const _=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),l={name:"config/index.md"},n=t(`<h1 id="属性" tabindex="-1">属性 <a class="header-anchor" href="#属性" aria-label="Permalink to "属性""></a></h1><h2 id="src" tabindex="-1">src <a class="header-anchor" href="#src" aria-label="Permalink to "src""></a></h2><ul><li>类型：String, ArrayBuffer, Blob</li></ul><p>文档地址，文件在CDN或服务器上的地址，或者是通过FileReader读取的文件ArrayBuffer或者Blob格式。</p><h2 id="request-options" tabindex="-1">request-options <a class="header-anchor" href="#request-options" aria-label="Permalink to "request-options""></a></h2><ul><li>类型：Object</li></ul><p>如果属性src是个文件地址，组件内部会通过window.fetch进行请求，对应window.fetch的请求参数，可以用来设置header等请求信息。</p><h2 id="options-xlsx特有属性" tabindex="-1">options [xlsx特有属性] <a class="header-anchor" href="#options-xlsx特有属性" aria-label="Permalink to "options [xlsx特有属性]""></a></h2><ul><li>类型： Object</li></ul><p>excel相关的配置，目前支持配置项很少。</p><p>minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</p><div class="language-json"><button title="Copy Code" class="copy"></button><span class="lang">json</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C792EA;">minColLength</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">20</span><span style="color:#A6ACCD;"> </span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="staticfileurl-pdf特有属性" tabindex="-1">staticFileUrl [pdf特有属性] <a class="header-anchor" href="#staticfileurl-pdf特有属性" aria-label="Permalink to "staticFileUrl [pdf特有属性]""></a></h2><ul><li>类型： String</li></ul><p>pdf渲染时可能会请求一些bcmap文件，这些文件默认从 <a href="https://unpkg.com/pdfjs-dist@3.1.81/" target="_blank" rel="noreferrer">https://unpkg.com/pdfjs-dist@3.1.81/</a> 加载，但是可能存在网络不通问题，如果遇到这种问题，可以将这些文件放到自己静态目录，然后修改该属性，告诉组件去这里请求bcmap文件。</p><p>涉及的文件存放在当前github项目中examples/public/cmaps目录下，可将cmaps目录复制到你的静态服务目录下，然后修改staticFileUrl为cmaps文件夹对应的父地址，必须已http或https开头，如 <a href="http://yourdomain/static/" target="_blank" rel="noreferrer">http://yourdomain/static/</a></p>`,16),o=[n];function r(i,p,c,d,h,u){return s(),e("div",null,o)}const m=a(l,[["render",r]]);export{_ as __pageData,m as default};
|
||||
1
examples/docs/assets/config_index.md.d8db770a.lean.js
Normal file
1
examples/docs/assets/config_index.md.d8db770a.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as a,c as e,o as s,Q as t}from"./chunks/framework.3816f80c.js";const _=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),l={name:"config/index.md"},n=t("",16),o=[n];function r(i,p,c,d,h,u){return s(),e("div",null,o)}const m=a(l,[["render",r]]);export{_ as __pageData,m as default};
|
||||
1
examples/docs/assets/guide_contact.md.8f6d2412.js
Normal file
1
examples/docs/assets/guide_contact.md.8f6d2412.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as t,o as a,Q as o}from"./chunks/framework.3816f80c.js";const f=JSON.parse('{"title":"联系我","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contact.md"}'),i={name:"guide/contact.md"},s=o('<h1 id="联系我" tabindex="-1">联系我 <a class="header-anchor" href="#联系我" aria-label="Permalink to "联系我""></a></h1><h2 id="提issue" tabindex="-1">提Issue <a class="header-anchor" href="#提issue" aria-label="Permalink to "提Issue""></a></h2><p>如果您遇到了问题，欢迎提Issue，同时请您尽可能详细的描述您遇到的问题，包括不限于</p><ul><li>您使用的是哪个库： @vue-office/docx、@vue-office/excel、@vue-office/pdf</li><li>您使用的环境：APP or Web，PC or 移动端，如果是浏览器兼容问题，请提供您的浏览器版本</li><li>如果有错误，请粘贴详细的报错信息</li></ul><p>详细的描述有助于我尽快定位问题，因为平时工作很忙，时间很有限，感谢理解</p><h2 id="赞助和微信交流" tabindex="-1">赞助和微信交流 <a class="header-anchor" href="#赞助和微信交流" aria-label="Permalink to "赞助和微信交流""></a></h2><p><strong><em>如果该项目确实帮助到了您</em></strong>，欢迎赞助，以鼓励我将更多的休息时间，投入到该项目的优化中，也欢迎赞助后添加微信交流：_hit757_</p><img src="https://501351981.github.io/vue-office/examples/public/static/wx.png" alt="赞助二维码" width="260"><div class="tip custom-block"><p class="custom-block-title">跪求一赞</p><p>如果您觉得该项目帮助了您，还请伸出贵手帮忙点赞支持，万分感谢~~</p></div>',9),c=[s];function r(l,n,_,d,u,p){return a(),t("div",null,c)}const m=e(i,[["render",r]]);export{f as __pageData,m as default};
|
||||
1
examples/docs/assets/guide_contact.md.8f6d2412.lean.js
Normal file
1
examples/docs/assets/guide_contact.md.8f6d2412.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as t,o as a,Q as o}from"./chunks/framework.3816f80c.js";const f=JSON.parse('{"title":"联系我","description":"","frontmatter":{},"headers":[],"relativePath":"guide/contact.md"}'),i={name:"guide/contact.md"},s=o("",9),c=[s];function r(l,n,_,d,u,p){return a(),t("div",null,c)}const m=e(i,[["render",r]]);export{f as __pageData,m as default};
|
||||
1
examples/docs/assets/guide_faq.md.51aeefd4.js
Normal file
1
examples/docs/assets/guide_faq.md.51aeefd4.js
Normal file
File diff suppressed because one or more lines are too long
1
examples/docs/assets/guide_faq.md.51aeefd4.lean.js
Normal file
1
examples/docs/assets/guide_faq.md.51aeefd4.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as A,c as E,o as I,Q as C}from"./chunks/framework.3816f80c.js";const P=JSON.parse('{"title":"常见问题","description":"","frontmatter":{},"headers":[],"relativePath":"guide/faq.md"}'),Q={name:"guide/faq.md"},B=C("",7),i=[B];function g(J,k,R,S,f,e){return I(),E("div",null,i)}const t=A(Q,[["render",g]]);export{P as __pageData,t as default};
|
||||
121
examples/docs/assets/guide_index.md.0f62307c.js
Normal file
121
examples/docs/assets/guide_index.md.0f62307c.js
Normal file
@ -0,0 +1,121 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"vue-office简介","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),p={name:"guide/index.md"},o=l(`<h1 id="vue-office简介" tabindex="-1">vue-office简介 <a class="header-anchor" href="#vue-office简介" aria-label="Permalink to "vue-office简介""></a></h1><p>vue-office是一个支持多种文件(docx、.xlsx、pdf)预览的vue组件库，支持vue2和vue3。</p><p>目标是成为使用最简单，功能最强大的文件预览库</p><p><a href="https://501351981.github.io/vue-office/examples/dist/" target="_blank" rel="noreferrer">查看演示demo</a></p><h2 id="功能特色" tabindex="-1">功能特色 <a class="header-anchor" href="#功能特色" aria-label="Permalink to "功能特色""></a></h2><ul><li>一站式：提供docx、.xlsx、pdf多种文档的在线预览方案，有它就够了，不用再四处寻找、测试、集成各种库了</li><li>使用简单：只需提供文档的src(网络地址)即可完成文档预览，也支持ArrayBuffer、Blob等多种格式</li><li>支持样式：不仅能预览内容，也支持文档样式，最大限度还原office文件内容</li></ul><h2 id="安装" tabindex="-1">安装 <a class="header-anchor" href="#安装" aria-label="Permalink to "安装""></a></h2><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;">#docx文档预览组件</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue-demi</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">#excel文档预览组件</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@vue-office/excel</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue-demi</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">#pdf文档预览组件</span></span>
|
||||
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@vue-office/pdf</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">vue-demi</span></span>
|
||||
<span class="line"></span></code></pre></div><p>如果是vue2.6版本或以下还需要额外安装 @vue/composition-api</p><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">install</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@vue/composition-api</span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to "使用网络地址预览""></a></h2><p>docx、xlsx、pdf三种文件的预览方式几乎一致，我们先以docx文档的预览为例，介绍下组件用法。</p><p>docx的预览如下：</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">height: 100vh;</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入VueOfficeDocx组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入相关样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> docx</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/test6.docx</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//设置文档网络地址，可以是相对地址</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">renderedHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><p>可以看出，非常的简单，只需要指定文档的src远程地址即可。</p><p>可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。</p><p>组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。</p><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。</p><p>我们以ElementUI的上传组件作为示例，当然也可以使用普通的input type="file"，只要能获取文件的ArrayBuffer格式数据即可。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">docx-demo</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">el-upload</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:limit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:file-list</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fileList</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">accept</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.docx</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:beforeUpload</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">beforeUpload</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">action</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">""</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> ></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">size</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">small</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">点击上传</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">el-upload</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> fileList</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> []</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//在beforeUpload中读取文件内容</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">beforeUpload</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">file</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">FileReader</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">readAsArrayBuffer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">loadEvent</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arrayBuffer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">loadEvent</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">result</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arrayBuffer</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><p>主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。</p><p>如果是原生的input type="file"，也是类似的</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">file</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">changeHandle</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">changeHandle</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">files</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">FileReader</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">readAsArrayBuffer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">result</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,24),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const f=s(p,[["render",t]]);export{A as __pageData,f as default};
|
||||
1
examples/docs/assets/guide_index.md.0f62307c.lean.js
Normal file
1
examples/docs/assets/guide_index.md.0f62307c.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"vue-office简介","description":"","frontmatter":{},"headers":[],"relativePath":"guide/index.md"}'),p={name:"guide/index.md"},o=l("",24),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const f=s(p,[["render",t]]);export{A as __pageData,f as default};
|
||||
112
examples/docs/assets/guide_preview-docx.md.3e074928.js
Normal file
112
examples/docs/assets/guide_preview-docx.md.3e074928.js
Normal file
@ -0,0 +1,112 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"docx文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-docx.md"}'),p={name:"guide/preview-docx.md"},o=l(`<h1 id="docx文件预览" tabindex="-1">docx文件预览 <a class="header-anchor" href="#docx文件预览" aria-label="Permalink to "docx文件预览""></a></h1><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>目前只支持docx文件预览，不支持doc文件。</p></div><p>这部分内容和快速上手中docx预览内容一样，看过的可以跳过</p><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to "使用网络地址预览""></a></h2><p>通过配置docx文件的远程地址实现预览，这种预览方式最简单。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">height: 100vh;</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入VueOfficeDocx组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入相关样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> docx</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/test6.docx</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//设置文档网络地址，可以是相对地址</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">renderedHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><p>可以设置组件的style配置样式，通常需要设置下高度height，如果不设置则默认取组件的父元素高度，最小高度300px。</p><p>组件渲染完成会抛出rendered事件，渲染失败会抛出error事件。</p><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>预览通常有两种场景，一种是已有文件的远程地址，另一种是上传前预览，上传前预览主要是通过读取文件的ArrayBuffer格式，传给预览组件来实现。</p><p>我们以ElementUI的上传组件作为示例，当然也可以使用普通的input type="file"，只要能获取文件的ArrayBuffer格式数据即可。</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">id</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">docx-demo</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">el-upload</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:limit</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">1</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:file-list</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">fileList</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">accept</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">.docx</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:beforeUpload</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">beforeUpload</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">action</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">""</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> ></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">size</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">small</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">warning</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">></span><span style="color:#A6ACCD;">点击上传</span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">el-button</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">el-upload</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> fileList</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> []</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//在beforeUpload中读取文件内容</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">beforeUpload</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">file</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">FileReader</span><span style="color:#F07178;">()</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">readAsArrayBuffer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">reader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">loadEvent</span><span style="color:#89DDFF;">)</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arrayBuffer</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">loadEvent</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">result</span><span style="color:#89DDFF;">;</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">arrayBuffer</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">};</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><p>主要是利用在beforeUpload中获取上传的文件，然后利用FileReader以ArrayBuffer格式读取，读取之后传给预览组件。</p><p>如果是原生的input type="file"，也是类似的</p><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">input</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">type</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">file</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@change</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">changeHandle</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-docx</span><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">src</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">/></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"></</span><span style="color:#F07178;">div</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/docx/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeDocx</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> src</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">''</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">changeHandle</span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">event</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">event</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">target</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">files</span><span style="color:#F07178;">[</span><span style="color:#F78C6C;">0</span><span style="color:#F07178;">]</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#C792EA;">let</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">new</span><span style="color:#F07178;"> </span><span style="color:#82AAFF;">FileReader</span><span style="color:#F07178;">()</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">readAsArrayBuffer</span><span style="color:#F07178;">(</span><span style="color:#A6ACCD;">file</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">onload</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">()</span><span style="color:#F07178;"> </span><span style="color:#C792EA;">=></span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">this.</span><span style="color:#A6ACCD;">src</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">fileReader</span><span style="color:#89DDFF;">.</span><span style="color:#A6ACCD;">result</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div>`,15),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"docx文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-docx.md"}'),p={name:"guide/preview-docx.md"},o=l("",15),e=[o];function t(c,r,F,D,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
32
examples/docs/assets/guide_preview-pdf.md.d639fca0.js
Normal file
32
examples/docs/assets/guide_preview-pdf.md.d639fca0.js
Normal file
@ -0,0 +1,32 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const C=JSON.parse('{"title":"pdf文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-pdf.md"}'),p={name:"guide/preview-pdf.md"},o=l(`<h1 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to "pdf文件预览""></a></h1><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to "使用网络地址预览""></a></h2><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-pdf</span><span style="color:#89DDFF;"> </span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入VueOfficePdf组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficePdf </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/pdf</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficePdf</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> pdf</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/test.pdf</span><span style="color:#89DDFF;">'</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//设置文档地址</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">renderedHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p>`,5),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const C=JSON.parse('{"title":"pdf文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-pdf.md"}'),p={name:"guide/preview-pdf.md"},o=l("",5),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const A=s(p,[["render",t]]);export{C as __pageData,A as default};
|
||||
35
examples/docs/assets/guide_preview-xlsx.md.2cceda29.js
Normal file
35
examples/docs/assets/guide_preview-xlsx.md.2cceda29.js
Normal file
@ -0,0 +1,35 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"xlsx文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-xlsx.md"}'),p={name:"guide/preview-xlsx.md"},o=l(`<h1 id="xlsx文件预览" tabindex="-1">xlsx文件预览 <a class="header-anchor" href="#xlsx文件预览" aria-label="Permalink to "xlsx文件预览""></a></h1><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>目前只支持xlsx文件预览，不支持xls文件。</p></div><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to "使用网络地址预览""></a></h2><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-excel</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">excel</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">height: 100vh;</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">"</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入VueOfficeExcel组件</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeExcel </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/excel</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入相关样式</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/excel/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeExcel</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> excel</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/demo/excel.xlsx</span><span style="color:#89DDFF;">'</span><span style="color:#676E95;font-style:italic;">//设置文档地址</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">renderedHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||||
<span class="line"></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p>`,6),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
@ -0,0 +1 @@
|
||||
import{_ as s,c as n,o as a,Q as l}from"./chunks/framework.3816f80c.js";const A=JSON.parse('{"title":"xlsx文件预览","description":"","frontmatter":{},"headers":[],"relativePath":"guide/preview-xlsx.md"}'),p={name:"guide/preview-xlsx.md"},o=l("",6),e=[o];function t(c,r,D,F,y,i){return a(),n("div",null,e)}const d=s(p,[["render",t]]);export{A as __pageData,d as default};
|
||||
1
examples/docs/assets/index.md.ab467ec3.js
Normal file
1
examples/docs/assets/index.md.ab467ec3.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as t,o as a}from"./chunks/framework.3816f80c.js";const x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"vue-office","text":"更易用的文件预览","tagline":"支持docx、xlsx、pdf文件预览","actions":[{"theme":"brand","text":"指南","link":"/guide/"},{"theme":"alt","text":"配置参考","link":"/config/"}]},"features":[{"title":"一站式","details":"提供docx、xlsx、pdf 3种文档的在线预览方案"},{"title":"使用简单","details":"只需提供文档的src即可完成文档预览，支持远程地址、ArrayBuffer、Blob多种格式"},{"title":"支持样式","details":"不仅能预览内容，也支持文档样式，最大限度还原office文件内容"}]},"headers":[],"relativePath":"index.md"}'),o={name:"index.md"};function i(n,r,s,c,d,l){return a(),t("div")}const p=e(o,[["render",i]]);export{x as __pageData,p as default};
|
||||
1
examples/docs/assets/index.md.ab467ec3.lean.js
Normal file
1
examples/docs/assets/index.md.ab467ec3.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as e,c as t,o as a}from"./chunks/framework.3816f80c.js";const x=JSON.parse('{"title":"","description":"","frontmatter":{"layout":"home","hero":{"name":"vue-office","text":"更易用的文件预览","tagline":"支持docx、xlsx、pdf文件预览","actions":[{"theme":"brand","text":"指南","link":"/guide/"},{"theme":"alt","text":"配置参考","link":"/config/"}]},"features":[{"title":"一站式","details":"提供docx、xlsx、pdf 3种文档的在线预览方案"},{"title":"使用简单","details":"只需提供文档的src即可完成文档预览，支持远程地址、ArrayBuffer、Blob多种格式"},{"title":"支持样式","details":"不仅能预览内容，也支持文档样式，最大限度还原office文件内容"}]},"headers":[],"relativePath":"index.md"}'),o={name:"index.md"};function i(n,r,s,c,d,l){return a(),t("div")}const p=e(o,[["render",i]]);export{x as __pageData,p as default};
|
||||
BIN
examples/docs/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
Normal file
BIN
examples/docs/assets/inter-italic-cyrillic-ext.33bd5a8e.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-cyrillic.ea42a392.woff2
Normal file
BIN
examples/docs/assets/inter-italic-cyrillic.ea42a392.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-greek-ext.4fbe9427.woff2
Normal file
BIN
examples/docs/assets/inter-italic-greek-ext.4fbe9427.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-greek.8f4463c4.woff2
Normal file
BIN
examples/docs/assets/inter-italic-greek.8f4463c4.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-latin-ext.bd8920cc.woff2
Normal file
BIN
examples/docs/assets/inter-italic-latin-ext.bd8920cc.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-latin.bd3b6f56.woff2
Normal file
BIN
examples/docs/assets/inter-italic-latin.bd3b6f56.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-italic-vietnamese.6ce511fb.woff2
Normal file
BIN
examples/docs/assets/inter-italic-vietnamese.6ce511fb.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-cyrillic-ext.e75737ce.woff2
Normal file
BIN
examples/docs/assets/inter-roman-cyrillic-ext.e75737ce.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-cyrillic.5f2c6c8c.woff2
Normal file
BIN
examples/docs/assets/inter-roman-cyrillic.5f2c6c8c.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-greek-ext.ab0619bc.woff2
Normal file
BIN
examples/docs/assets/inter-roman-greek-ext.ab0619bc.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-greek.d5a6d92a.woff2
Normal file
BIN
examples/docs/assets/inter-roman-greek.d5a6d92a.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-latin-ext.0030eebd.woff2
Normal file
BIN
examples/docs/assets/inter-roman-latin-ext.0030eebd.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-latin.2ed14f66.woff2
Normal file
BIN
examples/docs/assets/inter-roman-latin.2ed14f66.woff2
Normal file
Binary file not shown.
BIN
examples/docs/assets/inter-roman-vietnamese.14ce25a6.woff2
Normal file
BIN
examples/docs/assets/inter-roman-vietnamese.14ce25a6.woff2
Normal file
Binary file not shown.
1
examples/docs/assets/style.16c1fe7a.css
Normal file
1
examples/docs/assets/style.16c1fe7a.css
Normal file
File diff suppressed because one or more lines are too long
22
examples/docs/config/event.html
Normal file
22
examples/docs/config/event.html
Normal file
File diff suppressed because one or more lines are too long
25
examples/docs/config/index.html
Normal file
25
examples/docs/config/index.html
Normal file
File diff suppressed because one or more lines are too long
22
examples/docs/guide/contact.html
Normal file
22
examples/docs/guide/contact.html
Normal file
File diff suppressed because one or more lines are too long
22
examples/docs/guide/faq.html
Normal file
22
examples/docs/guide/faq.html
Normal file
File diff suppressed because one or more lines are too long
142
examples/docs/guide/index.html
Normal file
142
examples/docs/guide/index.html
Normal file
File diff suppressed because one or more lines are too long
133
examples/docs/guide/preview-docx.html
Normal file
133
examples/docs/guide/preview-docx.html
Normal file
File diff suppressed because one or more lines are too long
53
examples/docs/guide/preview-pdf.html
Normal file
53
examples/docs/guide/preview-pdf.html
Normal file
File diff suppressed because one or more lines are too long
56
examples/docs/guide/preview-xlsx.html
Normal file
56
examples/docs/guide/preview-xlsx.html
Normal file
File diff suppressed because one or more lines are too long
1
examples/docs/hashmap.json
Normal file
1
examples/docs/hashmap.json
Normal file
@ -0,0 +1 @@
|
||||
{"config_index.md":"d8db770a","guide_preview-pdf.md":"d639fca0","config_event.md":"c79800d4","guide_contact.md":"8f6d2412","guide_preview-docx.md":"3e074928","index.md":"ab467ec3","guide_index.md":"0f62307c","guide_preview-xlsx.md":"2cceda29","guide_faq.md":"51aeefd4"}
|
||||
22
examples/docs/index.html
Normal file
22
examples/docs/index.html
Normal file
File diff suppressed because one or more lines are too long
8648
package-lock.json
generated
Normal file
8648
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -2,7 +2,9 @@
|
||||
"name": "vue-office",
|
||||
"version": "0.1.4",
|
||||
"description": "通过Vue开发的办公文档预览组件，支持docx、pdf、ppt、excel(已实现)的预览",
|
||||
"scripts": {},
|
||||
"scripts": {
|
||||
"docs:build": "vuepress build docs"
|
||||
},
|
||||
"dependencies": {
|
||||
"dayjs": "^1.11.7",
|
||||
"docx-preview": "^0.1.14",
|
||||
@ -24,6 +26,7 @@
|
||||
"vite": "^4.0.0",
|
||||
"vite-plugin-require-transform": "^1.0.9",
|
||||
"vite-plugin-vue2": "^2.0.3",
|
||||
"vitepress": "^1.0.0-alpha.61",
|
||||
"vue-template-compiler": "2.6.14",
|
||||
"vue2": "npm:vue@2.6.14",
|
||||
"vue3": "npm:vue@3.2.45"
|
||||
|
||||
@ -4,7 +4,7 @@ import docx from './docx';
|
||||
export default defineComponent({
|
||||
name: 'VueOfficeDocx',
|
||||
props: {
|
||||
src: [String, ArrayBuffer, Blob],
|
||||
src: [String, ArrayBuffer, Blob],
|
||||
requestOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user