mirror of
https://github.com/501351981/vue-office.git
synced 2025-06-15 07:00:00 +08:00
change: pdf预览清晰度调整、支持更多options
This commit is contained in:
liyulin
parent
a36059e69d
commit
165960f897
@ -5,8 +5,7 @@
|
||||
"scripts": {
|
||||
"dev": "node script/bak-vue.js && vite",
|
||||
"build": "node script/bak-vue.js && vite build",
|
||||
"lib": "node script/bak-vue.js bak && lerna run build",
|
||||
"docs:build": "vuepress build docs"
|
||||
"lib": "node script/bak-vue.js bak && lerna run build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vue/compiler-sfc": "3.2.45",
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@vue-office/pdf",
|
||||
"version": "1.0.0",
|
||||
"version": "1.1.0",
|
||||
"description": "",
|
||||
"main": "lib/index.js",
|
||||
"files": [
|
||||
|
||||
@ -1,127 +1,147 @@
|
||||
<script>
|
||||
import { defineComponent,ref, onMounted, watch } from 'vue-demi';
|
||||
import {defineComponent, ref, onMounted, watch} from 'vue-demi';
|
||||
import {worker} from './worker';
|
||||
import {pdfjsLib} from './pdf';
|
||||
import {getUrl, loadScript} from '../../../utils/url';
|
||||
import {omit} from "lodash";
|
||||
|
||||
const pdfJsLibSrc = `data:text/javascript;base64,${pdfjsLib}`;
|
||||
const PdfJsWorkerSrc = `data:text/javascript;base64,${worker}`;
|
||||
|
||||
export default defineComponent({
|
||||
name: 'VueOfficePdf',
|
||||
props: {
|
||||
src: [String, ArrayBuffer, Blob],
|
||||
requestOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
staticFileUrl:{
|
||||
type: String,
|
||||
default: 'https://unpkg.com/pdfjs-dist@3.1.81/'
|
||||
}
|
||||
},
|
||||
emits:['rendered', 'error'],
|
||||
setup(props, { emit }){
|
||||
let pdfDocument = null;
|
||||
const rootRef = ref([]);
|
||||
const numPages = ref(0);
|
||||
|
||||
function installPdfScript() {
|
||||
return loadScript(pdfJsLibSrc).then(() => {
|
||||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = PdfJsWorkerSrc;
|
||||
});
|
||||
}
|
||||
|
||||
function checkPdfLib() {
|
||||
if (window.pdfjsLib) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return installPdfScript();
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!props.src) {
|
||||
numPages.value = 0;
|
||||
return;
|
||||
}
|
||||
const loadingTask = window.pdfjsLib.getDocument({
|
||||
url: getUrl(props.src),
|
||||
cMapUrl: `${props.staticFileUrl.endsWith('/') ? props.staticFileUrl : props.staticFileUrl + '/'}cmaps/`,
|
||||
cMapPacked: true,
|
||||
enableXfa: true,
|
||||
});
|
||||
loadingTask.promise.then((pdf) => {
|
||||
pdfDocument = pdf;
|
||||
numPages.value = pdfDocument.numPages;
|
||||
renderPage(1);
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPage(num) {
|
||||
pdfDocument.getPage(num).then((pdfPage) => {
|
||||
const viewport = pdfPage.getViewport({scale: window.devicePixelRatio});
|
||||
|
||||
const canvas = rootRef.value[num-1];
|
||||
canvas.width = viewport.width;
|
||||
canvas.height = viewport.height;
|
||||
if(viewport.width > document.documentElement.clientWidth){
|
||||
canvas.style.width = '100%';
|
||||
}else{
|
||||
canvas.style.width = Math.floor(viewport.width) + 'px';
|
||||
name: 'VueOfficePdf',
|
||||
props: {
|
||||
src: [String, ArrayBuffer, Blob],
|
||||
requestOptions: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
staticFileUrl: {
|
||||
type: String,
|
||||
default: 'https://unpkg.com/pdfjs-dist@3.1.81/'
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
}
|
||||
const ctx = canvas.getContext('2d');
|
||||
const renderTask = pdfPage.render({
|
||||
canvasContext: ctx,
|
||||
viewport,
|
||||
});
|
||||
renderTask.promise.then(() => {
|
||||
if (numPages.value > num) {
|
||||
renderPage(num + 1);
|
||||
} else {
|
||||
emit('rendered');
|
||||
}
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
},
|
||||
emits: ['rendered', 'error'],
|
||||
setup(props, {emit}) {
|
||||
let pdfDocument = null;
|
||||
const rootRef = ref([]);
|
||||
const numPages = ref(0);
|
||||
|
||||
function installPdfScript() {
|
||||
return loadScript(pdfJsLibSrc).then(() => {
|
||||
window.pdfjsLib.GlobalWorkerOptions.workerSrc = PdfJsWorkerSrc;
|
||||
});
|
||||
}
|
||||
|
||||
function checkPdfLib() {
|
||||
if (window.pdfjsLib) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
return installPdfScript();
|
||||
}
|
||||
|
||||
function init() {
|
||||
if (!props.src) {
|
||||
numPages.value = 0;
|
||||
return;
|
||||
}
|
||||
const loadingTask = window.pdfjsLib.getDocument({
|
||||
url: getUrl(props.src),
|
||||
cMapUrl: `${props.staticFileUrl.endsWith('/') ? props.staticFileUrl : props.staticFileUrl + '/'}cmaps/`,
|
||||
cMapPacked: true,
|
||||
enableXfa: true,
|
||||
...omit(props.options, ['width'])
|
||||
});
|
||||
loadingTask.promise.then((pdf) => {
|
||||
pdfDocument = pdf;
|
||||
numPages.value = pdfDocument.numPages;
|
||||
renderPage(1);
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
}
|
||||
|
||||
function renderPage(num) {
|
||||
pdfDocument.getPage(num).then((pdfPage) => {
|
||||
const viewport = pdfPage.getViewport({scale: 2});
|
||||
const outputScale = window.devicePixelRatio || 1;
|
||||
|
||||
const canvas = rootRef.value[num - 1];
|
||||
const ctx = canvas.getContext('2d');
|
||||
|
||||
canvas.width = Math.floor(viewport.width * outputScale);
|
||||
canvas.height = Math.floor(viewport.height * outputScale);
|
||||
|
||||
let domWidth = Math.floor(viewport.width);
|
||||
let domHeight = Math.floor(viewport.height);
|
||||
if (props.options.width) {
|
||||
let scale = props.options.width / domWidth;
|
||||
domWidth = props.options.width;
|
||||
domHeight = domHeight * scale;
|
||||
}
|
||||
|
||||
canvas.style.width = domWidth + 'px';
|
||||
canvas.style.height = domHeight + 'px';
|
||||
|
||||
const transform = outputScale !== 1
|
||||
? [outputScale, 0, 0, outputScale, 0, 0]
|
||||
: null;
|
||||
|
||||
const renderTask = pdfPage.render({
|
||||
canvasContext: ctx,
|
||||
transform,
|
||||
viewport
|
||||
});
|
||||
renderTask.promise.then(() => {
|
||||
if (numPages.value > num) {
|
||||
renderPage(num + 1);
|
||||
} else {
|
||||
emit('rendered');
|
||||
}
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
}).catch((e) => {
|
||||
emit('error', e);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
if (props.src) {
|
||||
checkPdfLib().then(init);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.src, () => {
|
||||
checkPdfLib().then(init);
|
||||
});
|
||||
return {
|
||||
rootRef,
|
||||
numPages
|
||||
};
|
||||
}
|
||||
|
||||
onMounted(()=>{
|
||||
if (props.src) {
|
||||
checkPdfLib().then(init);
|
||||
}
|
||||
});
|
||||
|
||||
watch(() => props.src, ()=>{
|
||||
checkPdfLib().then(init);
|
||||
});
|
||||
return {
|
||||
rootRef,
|
||||
numPages
|
||||
};
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;">
|
||||
<div
|
||||
v-if="numPages"
|
||||
class="vue-office-pdf-wrapper"
|
||||
style="background: gray; padding: 30px 0;position: relative;">
|
||||
<canvas
|
||||
v-for="page in numPages"
|
||||
ref="rootRef"
|
||||
:key="page"
|
||||
style="width:100%"
|
||||
/>
|
||||
<div class="vue-office-pdf" ref="vue-office-pdf" style="text-align: center;overflow-y: auto;">
|
||||
<div
|
||||
v-if="numPages"
|
||||
class="vue-office-pdf-wrapper"
|
||||
style="background: gray; padding: 30px 0;position: relative;">
|
||||
<canvas
|
||||
v-for="page in numPages"
|
||||
ref="rootRef"
|
||||
:key="page"
|
||||
style="width:100%"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
|
||||
|
||||
@ -21,6 +21,7 @@ function onError(e){
|
||||
<VueOfficePdf
|
||||
:src="slotProps.src"
|
||||
style="flex: 1;height: 0"
|
||||
:options="{}"
|
||||
@rendered="onRendered"
|
||||
@error="onError"
|
||||
/>
|
||||
|
||||
@ -12,10 +12,14 @@
|
||||
如果属性src是个文件地址，组件内部会通过window.fetch进行请求，对应window.fetch的请求参数，可以用来设置header等请求信息。
|
||||
|
||||
|
||||
## options [xlsx特有属性]
|
||||
## options
|
||||
|
||||
- 类型： Object
|
||||
|
||||
预览需要的一些特殊配置，不同预览组件可配置项各不相同。
|
||||
|
||||
- excel预览
|
||||
|
||||
excel相关的配置，目前支持配置项很少。
|
||||
|
||||
minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
|
||||
@ -26,6 +30,46 @@ minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几
|
||||
}
|
||||
```
|
||||
|
||||
- docx预览
|
||||
|
||||
docx预览组件支持的可配置项如下
|
||||
|
||||
```typescript
|
||||
{
|
||||
className: string = "docx", //class name/prefix for default and document style classes
|
||||
inWrapper: boolean = true, //enables rendering of wrapper around document content
|
||||
ignoreWidth: boolean = false, //disables rendering width of page
|
||||
ignoreHeight: boolean = false, //disables rendering height of page
|
||||
ignoreFonts: boolean = false, //disables fonts rendering
|
||||
breakPages: boolean = true, //enables page breaking on page breaks
|
||||
ignoreLastRenderedPageBreak: boolean = false, //disables page breaking on lastRenderedPageBreak elements
|
||||
experimental: boolean = false, //enables experimental features (tab stops calculation)
|
||||
trimXmlDeclaration: boolean = true, //if true, xml declaration will be removed from xml documents before parsing
|
||||
useBase64URL: boolean = false, //if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used
|
||||
useMathMLPolyfill: boolean = false, //includes MathML polyfills for chrome, edge, etc.
|
||||
showChanges: false, //enables experimental rendering of document changes (inserions/deletions)
|
||||
debug: boolean = false, //enables additional logging
|
||||
}
|
||||
```
|
||||
|
||||
- pdf预览
|
||||
|
||||
pdf 预览组件支持的可配置项如下
|
||||
|
||||
```javascript
|
||||
const options = {
|
||||
width: 500, //number，可不传，用来控制pdf预览的宽度，默认根据文档实际宽度计算
|
||||
httpHeaders: {}, //object, Basic authentication headers
|
||||
password: '', //string, 加密pdf的密码
|
||||
//更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## staticFileUrl [pdf特有属性]
|
||||
- 类型： String
|
||||
|
||||
|
||||
310
examples/dist/assets/index-3fbf9a6a.js
vendored
Normal file
310
examples/dist/assets/index-3fbf9a6a.js
vendored
Normal file
File diff suppressed because one or more lines are too long
2
examples/dist/index.html
vendored
2
examples/dist/index.html
vendored
@ -7,7 +7,7 @@
|
||||
content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<title>Vite + Vue</title>
|
||||
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-989e0b56.js"></script>
|
||||
<script type="module" crossorigin src="/vue-office/examples/dist/assets/index-3fbf9a6a.js"></script>
|
||||
<link rel="stylesheet" href="/vue-office/examples/dist/assets/index-c3359691.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -1,3 +0,0 @@
|
||||
import{_ as a,c as e,o as s,O as t}from"./chunks/framework.935eb42c.js";const _=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),l={name:"config/index.md"},o=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></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),n=[o];function r(i,p,c,d,h,u){return s(),e("div",null,n)}const m=a(l,[["render",r]]);export{_ as __pageData,m as default};
|
||||
@ -1 +0,0 @@
|
||||
import{_ as a,c as e,o as s,O as t}from"./chunks/framework.935eb42c.js";const _=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),l={name:"config/index.md"},o=t("",16),n=[o];function r(i,p,c,d,h,u){return s(),e("div",null,n)}const m=a(l,[["render",r]]);export{_ as __pageData,m as default};
|
||||
22
examples/docs/assets/config_index.md.da90cec3.js
Normal file
22
examples/docs/assets/config_index.md.da90cec3.js
Normal file
@ -0,0 +1,22 @@
|
||||
import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const d=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l(`<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" tabindex="-1">options <a class="header-anchor" href="#options" aria-label="Permalink to "options""></a></h2><ul><li>类型： Object</li></ul><p>预览需要的一些特殊配置，不同预览组件可配置项各不相同。</p><ul><li>excel预览</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></code></pre></div><ul><li>docx预览</li></ul><p>docx预览组件支持的可配置项如下</p><div class="language-typescript"><button title="Copy Code" class="copy"></button><span class="lang">typescript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;">{</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">className</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">string</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">"</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//class name/prefix for default and document style classes</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">inWrapper</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables rendering of wrapper around document content</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">ignoreWidth</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//disables rendering width of page</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">ignoreHeight</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//disables rendering height of page</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">ignoreFonts</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//disables fonts rendering</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">breakPages</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables page breaking on page breaks</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">ignoreLastRenderedPageBreak</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//disables page breaking on lastRenderedPageBreak elements</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">experimental</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables experimental features (tab stops calculation)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">trimXmlDeclaration</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">true</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//if true, xml declaration will be removed from xml documents before parsing</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">useBase64URL</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//if true, images, fonts, etc. will be converted to base 64 URL, otherwise URL.createObjectURL is used</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">useMathMLPolyfill</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//includes MathML polyfills for chrome, edge, etc.</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">showChanges</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables experimental rendering of document changes (inserions/deletions)</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#FFCB6B;">debug</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">boolean</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">=</span><span style="color:#F07178;"> </span><span style="color:#FF9CAC;">false</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//enables additional logging</span></span>
|
||||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span></code></pre></div><ul><li>pdf预览</li></ul><p>pdf 预览组件支持的可配置项如下</p><div class="language-javascript"><button title="Copy Code" class="copy"></button><span class="lang">javascript</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> options </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;">width</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#F78C6C;">500</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//number，可不传，用来控制pdf预览的宽度，默认根据文档实际宽度计算</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">httpHeaders</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{},</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//object, Basic authentication headers</span></span>
|
||||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">password</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">''</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//string, 加密pdf的密码</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//更多配置参见 https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</span></span>
|
||||
<span class="line"><span style="color:#89DDFF;">}</span></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>`,24),e=[p];function t(r,c,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{d as __pageData,f as default};
|
||||
1
examples/docs/assets/config_index.md.da90cec3.lean.js
Normal file
1
examples/docs/assets/config_index.md.da90cec3.lean.js
Normal file
@ -0,0 +1 @@
|
||||
import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const d=JSON.parse('{"title":"属性","description":"","frontmatter":{},"headers":[],"relativePath":"config/index.md"}'),o={name:"config/index.md"},p=l("",24),e=[p];function t(r,c,F,y,i,D){return n(),a("div",null,e)}const f=s(o,[["render",t]]);export{d as __pageData,f as default};
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -35,7 +35,7 @@
|
||||
<span class="line"></span>
|
||||
<span class="line"></span>
|
||||
<span class="line"><span style="color:#A6ACCD;">app</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">listen</span><span style="color:#A6ACCD;">(</span><span style="color:#F78C6C;">3000</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">;</span></span></code></pre></div><p>各种语言都类似，可以自行百度查询</p><h2 id="文件预览不出来" tabindex="-1">文件预览不出来 <a class="header-anchor" href="#文件预览不出来" aria-label="Permalink to "文件预览不出来""></a></h2><ul><li>检查文件是否返回成功，是否存在跨域</li><li>目前不支持doc、xls格式文件的预览</li><li>可以看看@error事件，抛出了什么错误信息</li></ul></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>pdf文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/contact.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>联系我</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"13cbdfd3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"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\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -128,7 +128,7 @@
|
||||
<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></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><!----></div><div class="pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>docx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"13cbdfd3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"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\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
<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></code></pre></div></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>快速上手</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>xlsx文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"13cbdfd3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"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\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -45,7 +45,7 @@
|
||||
<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></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>xlsx文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/faq.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>常见问题</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"13cbdfd3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"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\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -48,7 +48,7 @@
|
||||
<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></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to "上传文件预览""></a></h2><p>和docx的上传文件预览一样，获取文件的ArrayBuffer，传给组件的src属性。</p></div></div></main><footer class="VPDocFooter" data-v-76ac46f7 data-v-a9a244d8><!--[--><!--]--><!----><div class="prev-next" data-v-a9a244d8><div class="pager" data-v-a9a244d8><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>docx文件预览</span></a></div><div class="has-prev pager" data-v-a9a244d8><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>pdf文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"13cbdfd3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"config_event.md\":\"cbedfdd0\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
<script>__VP_HASH_MAP__ = JSON.parse("{\"guide_preview-xlsx.md\":\"0de0ac4e\",\"index.md\":\"2dfe7e9d\",\"config_index.md\":\"da90cec3\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"guide_preview-docx.md\":\"747caaea\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"32e428fb\"}")
|
||||
__VP_SITE_DATA__ = JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"vue-office\",\"description\":\"更简单的office文件预览\",\"base\":\"/vue-office/examples/docs/\",\"head\":[],\"appearance\":true,\"themeConfig\":{\"nav\":[{\"text\":\"指南\",\"link\":\"/guide/\"},{\"text\":\"配置参考\",\"link\":\"/config/\"},{\"text\":\"演示预览效果\",\"link\":\"https://501351981.github.io/vue-office/examples/dist/\"}],\"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\"}]},\"locales\":{},\"scrollOffset\":90,\"cleanUrls\":false}")</script>
|
||||
|
||||
</body>
|
||||
|
||||
@ -1 +1 @@
|
||||
{"config_index.md":"13cbdfd3","guide_preview-pdf.md":"9bd426ea","guide_contact.md":"10c84e73","guide_preview-xlsx.md":"0de0ac4e","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","config_event.md":"cbedfdd0","guide_index.md":"59f780b1","guide_faq.md":"32e428fb"}
|
||||
{"guide_preview-xlsx.md":"0de0ac4e","index.md":"2dfe7e9d","config_index.md":"da90cec3","guide_preview-pdf.md":"9bd426ea","guide_contact.md":"10c84e73","config_event.md":"cbedfdd0","guide_preview-docx.md":"747caaea","guide_index.md":"59f780b1","guide_faq.md":"32e428fb"}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user