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

add: excel根据真实内容显示行

Browse Source
This commit is contained in:
liyulin 2023-11-28 14:41:46 +08:00
parent 76955355f7
commit 3256a86693
21 changed files with 38 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
core/packages/js-excel/index.d.ts vendored
View File

@ -1,5 +1,6 @@
export interface Options {
minColLength?: number;
minRowLength?: number;
showContextmenu?: boolean;
}

2
core/packages/js-excel/package.json
View File

@ -1,7 +1,7 @@
{
"name": "@js-preview/excel",
"type" :"module",
"version": "1.4.6",
"version": "1.4.7",
"description": "",
"main": "lib/index.js",
"files": [

7
core/packages/vue-excel/index.d.ts vendored
View File

@ -1,7 +1,12 @@
export interface Options {
minColLength?: number;
minRowLength?: number;
showContextmenu?: boolean;
}
declare const VueOfficeExcel: {
install?: (vue: any) => void;
src: string|ArrayBuffer|Blob;
requestOptions?: any;
options?: any
options?: Options;
};
export default VueOfficeExcel;

2
core/packages/vue-excel/package.json
View File

@ -1,6 +1,6 @@
{
"name": "@vue-office/excel",
"version": "1.4.6",
"version": "1.4.7",
"description": "",
"main": "lib/index.js",
"files": [

6
core/packages/vue-excel/src/excel.js
View File

@ -353,7 +353,7 @@ function getStyle(cell){
export function transferExcelToSpreadSheet(workbook, options){
let workbookData = [];
console.log(workbook, 'workbook');
// console.log(workbook, 'workbook');
let sheets = [];
workbook.eachSheet((sheet) => {
sheets.push(sheet);
@ -407,7 +407,9 @@ export function transferExcelToSpreadSheet(workbook, options){
}
let tempRowsKeys = Object.keys(sheetData.rows);
sheetData.rows.len = Math.max(tempRowsKeys[tempRowsKeys.length-1] + 1, 100);
sheetData.rows.len = Math.max(+tempRowsKeys[tempRowsKeys.length-1] + 1,
options.hasOwnProperty('minRowLength') ? options.minRowLength : 100);
workbookData.push(sheetData);
});
// console.log(workbookData, 'workbookData');

1
core/packages/vue-excel/src/main.vue
View File

@ -27,7 +27,6 @@ export default defineComponent({
},
emits: ['rendered', 'error'],
setup(props, {emit}) {
console.log(props.options.transformData)
const wrapperRef = ref(null);
const rootRef = ref(null);
let workbookDataSource = {

5
docs/config/index.md
View File

@ -24,6 +24,8 @@ excel相关的配置，目前支持配置项很少。
minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.
minRowLength: excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.
widthOffset：在默认渲染的列表宽度上再加10px宽
heightOffset：在默认渲染的列表高度上再加10px高
@ -32,7 +34,8 @@ transformData：在预览之前可以通过transformData对即将渲染数据及
```javascript
{
"minColLength": 20,
"minColLength": 20,
"minRowLength": 100,
"widthOffset": 0, //在默认渲染的列表宽度上再加10px宽
"heightOffset": 0, //在默认渲染的列表高度上再加10px高
"transformData": function (workbookData){

2
examples/docs/404.html
View File

File diff suppressed because one or more lines are too long

7
examples/docs/assets/config_index.md.5eca9ef5.js → examples/docs/assets/config_index.md.a6d3b89c.js
View File

@ -1,5 +1,6 @@
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 &quot;属性&quot;">​</a></h1><h2 id="src" tabindex="-1">src <a class="header-anchor" href="#src" aria-label="Permalink to &quot;src&quot;">​</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 &quot;request-options&quot;">​</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 &quot;options&quot;">​</a></h2><ul><li>类型： Object</li></ul><p>预览需要的一些特殊配置，不同预览组件可配置项各不相同。</p><ul><li>excel预览</li></ul><p>excel相关的配置，目前支持配置项很少。</p><p>minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</p><p>widthOffset：在默认渲染的列表宽度上再加10px宽</p><p>heightOffset：在默认渲染的列表高度上再加10px高</p><p>transformData：在预览之前可以通过transformData对即将渲染数据及样式进行修改</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:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">minColLength</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span></span>
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 &quot;属性&quot;">​</a></h1><h2 id="src" tabindex="-1">src <a class="header-anchor" href="#src" aria-label="Permalink to &quot;src&quot;">​</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 &quot;request-options&quot;">​</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 &quot;options&quot;">​</a></h2><ul><li>类型： Object</li></ul><p>预览需要的一些特殊配置，不同预览组件可配置项各不相同。</p><ul><li>excel预览</li></ul><p>excel相关的配置，目前支持配置项很少。</p><p>minColLength: excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</p><p>minRowLength: excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.</p><p>widthOffset：在默认渲染的列表宽度上再加10px宽</p><p>heightOffset：在默认渲染的列表高度上再加10px高</p><p>transformData：在预览之前可以通过transformData对即将渲染数据及样式进行修改</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:#89DDFF;">{</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">minColLength</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">20</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">minRowLength</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">100</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">widthOffset</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//在默认渲染的列表宽度上再加10px宽</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">heightOffset</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#F78C6C;">0</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#676E95;font-style:italic;">//在默认渲染的列表高度上再加10px高</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">transformData</span><span style="color:#89DDFF;">&quot;</span><span style="color:#F07178;">: </span><span style="color:#C792EA;">function</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">workbookData</span><span style="color:#89DDFF;">){</span></span>
@ -25,4 +26,4 @@ import{_ as s,c as a,o as n,O as l}from"./chunks/framework.935eb42c.js";const d=
<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;">&#39;&#39;</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 &quot;staticFileUrl [pdf特有属性]&quot;">​</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>`,27),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};
<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 &quot;staticFileUrl [pdf特有属性]&quot;">​</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>`,28),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};

2
examples/docs/assets/config_index.md.5eca9ef5.lean.js → examples/docs/assets/config_index.md.a6d3b89c.lean.js
View File

@ -1 +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("",27),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};
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("",28),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};

2
examples/docs/config/event.html
View File

File diff suppressed because one or more lines are too long

9
examples/docs/config/index.html
View File

File diff suppressed because one or more lines are too long

2
examples/docs/guide/contact.html
View File

File diff suppressed because one or more lines are too long

2
examples/docs/guide/faq.html
View File

@ -40,7 +40,7 @@
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">vue</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2.6.10</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">,</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C792EA;">vue-template-compiler</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">2.6.10</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>删除 package-lock.json 文件 和 node_modules中的全部包。</p><p>重新安装所有依赖，然后运行查看效果。</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/js-preview.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>上一页</span><span class="title" data-v-a9a244d8>非Vue框架进行文件预览</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_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/guide/index.html
View File

@ -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;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</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_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/guide/js-preview.html
View File

@ -78,7 +78,7 @@
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">CMapReaderFactory</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">useSystemFonts</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><h3 id="preview方法" tabindex="-1">preview方法 <a class="header-anchor" href="#preview方法" aria-label="Permalink to &quot;preview方法&quot;">​</a></h3><p>调用preview方法进行文件的预览。</p><p>preview方法接收参数支持三种： 文件url地址、文件ArrayBuffer格式数据、文件blob格式。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">preview</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">src</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">ArrayBuffer</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Blob</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Promise</span><span style="color:#89DDFF;">&lt;</span><span style="color:#A6ACCD;">any</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><p>url格式适合有文件静态地址的情况，ArrayBuffer格式适合文件上传前的预览。</p><h3 id="save方法" tabindex="-1">save方法 <a class="header-anchor" href="#save方法" aria-label="Permalink to &quot;save方法&quot;">​</a></h3><p>调用save进行文件下载，参数名为下载的文件名称，可不传。</p><div class="language-ts"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#FFCB6B;">save</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">fileName</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">void;</span></span></code></pre></div><h3 id="destroy方法" tabindex="-1">destroy方法 <a class="header-anchor" href="#destroy方法" aria-label="Permalink to &quot;destroy方法&quot;">​</a></h3><p>卸载方法，可以在组件销毁前调用预览对象的卸载方法，避免长期使用造成内存泄露。</p><h2 id="如果该项目帮助了您-还请您不吝点赞" tabindex="-1">如果该项目帮助了您，还请您不吝点赞 <a class="header-anchor" href="#如果该项目帮助了您-还请您不吝点赞" aria-label="Permalink to &quot;如果该项目帮助了您，还请您不吝点赞&quot;">​</a></h2></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/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_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/guide/preview-docx.html
View File

@ -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;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</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_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/guide/preview-pdf.html
View File

@ -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;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to &quot;上传文件预览&quot;">​</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/js-preview.html" data-v-a9a244d8><span class="desc" data-v-a9a244d8>下一页</span><span class="title" data-v-a9a244d8>非Vue框架进行文件预览</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/guide/preview-xlsx.html
View File

@ -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;">&lt;/</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</span></span></code></pre></div><h2 id="上传文件预览" tabindex="-1">上传文件预览 <a class="header-anchor" href="#上传文件预览" aria-label="Permalink to &quot;上传文件预览&quot;">​</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_event.md\":\"cbedfdd0\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_contact.md\":\"10c84e73\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_index.md\":\"59f780b1\",\"config_index.md\":\"5eca9ef5\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\"}")
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_index.md\":\"a6d3b89c\",\"guide_preview-pdf.md\":\"9bd426ea\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_contact.md\":\"10c84e73\",\"guide_js-preview.md\":\"d8c75dcf\",\"config_event.md\":\"cbedfdd0\",\"index.md\":\"2dfe7e9d\",\"guide_index.md\":\"59f780b1\",\"guide_faq.md\":\"fc7d1e4f\"}")
__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\":\"非Vue框架进行文件预览\",\"link\":\"/guide/js-preview\"},{\"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>

2
examples/docs/hashmap.json
View File

@ -1 +1 @@
{"config_event.md":"cbedfdd0","guide_preview-xlsx.md":"0de0ac4e","guide_preview-docx.md":"747caaea","index.md":"2dfe7e9d","guide_contact.md":"10c84e73","guide_preview-pdf.md":"9bd426ea","guide_index.md":"59f780b1","config_index.md":"5eca9ef5","guide_js-preview.md":"d8c75dcf","guide_faq.md":"fc7d1e4f"}
{"config_index.md":"a6d3b89c","guide_preview-pdf.md":"9bd426ea","guide_preview-xlsx.md":"0de0ac4e","guide_preview-docx.md":"747caaea","guide_contact.md":"10c84e73","guide_js-preview.md":"d8c75dcf","config_event.md":"cbedfdd0","index.md":"2dfe7e9d","guide_index.md":"59f780b1","guide_faq.md":"fc7d1e4f"}

2
examples/docs/index.html
View File

File diff suppressed because one or more lines are too long