2023-12-21 18:36:51 +08:00

50 lines
31 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en-US" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>属性 | vue-office</title>
<meta name="description" content="更简单的office文件预览">
<link rel="preload stylesheet" href="/vue-office/examples/docs/assets/style.f673c5ca.css" as="style">
<script type="module" src="/vue-office/examples/docs/assets/app.caad39f2.js"></script>
<link rel="preload" href="/vue-office/examples/docs/assets/inter-roman-latin.2ed14f66.woff2" as="font" type="font/woff2" crossorigin="">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/chunks/framework.935eb42c.js">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/chunks/theme.b572b8e6.js">
<link rel="modulepreload" href="/vue-office/examples/docs/assets/config_index.md.a066edee.lean.js">
<script id="check-dark-light">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
</head>
<body>
<div id="app"><div class="Layout" data-v-a484e24a><!--[--><!--]--><!--[--><span tabindex="-1" data-v-7b581ae5></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-7b581ae5> Skip to content </a><!--]--><!----><header class="VPNav" data-v-a484e24a data-v-52d944d6><div class="VPNavBar has-sidebar" data-v-52d944d6 data-v-f3dacc09><div class="container" data-v-f3dacc09><div class="title" data-v-f3dacc09><div class="VPNavBarTitle has-sidebar" data-v-f3dacc09 data-v-754524d5><a class="title" href="/vue-office/examples/docs/" data-v-754524d5><!--[--><!--]--><!----><!--[-->vue-office<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-f3dacc09><div class="curtain" data-v-f3dacc09></div><div class="content-body" data-v-f3dacc09><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:&#39;Meta&#39;;" data-v-f3dacc09><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-f3dacc09 data-v-56c387a0><span id="main-nav-aria-label" class="visually-hidden" data-v-56c387a0>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-office/examples/docs/guide/" tabindex="0" data-v-56c387a0 data-v-5075bf50 data-v-3ef3daad><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink active" href="/vue-office/examples/docs/config/" tabindex="0" data-v-56c387a0 data-v-5075bf50 data-v-3ef3daad><!--[-->配置参考<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://501351981.github.io/vue-office/examples/dist/" target="_blank" rel="noreferrer" tabindex="0" data-v-56c387a0 data-v-5075bf50 data-v-3ef3daad><!--[-->演示预览效果<!--]--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" height="24px" viewbox="0 0 24 24" width="24px" class="icon" data-v-3ef3daad><path d="M0 0h24v24H0V0z" fill="none"></path><path d="M9 5v2h6.59L4 18.59 5.41 20 17 8.41V15h2V5H9z"></path></svg></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-f3dacc09 data-v-8cc85833><label title="toggle dark mode" data-v-8cc85833 data-v-f8d4c7de><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-f8d4c7de data-v-e018e593><span class="check" data-v-e018e593><span class="icon" data-v-e018e593><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-f8d4c7de><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-f8d4c7de><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div><div class="VPSocialLinks VPNavBarSocialLinks social-links" data-v-f3dacc09 data-v-e020e990 data-v-3b7cc406><!--[--><a class="VPSocialLink" href="https://github.com/501351981/vue-office" aria-label="github" target="_blank" rel="noopener" data-v-3b7cc406 data-v-d7042ecc><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div><div class="VPFlyout VPNavBarExtra extra" data-v-f3dacc09 data-v-17654806 data-v-e01ae258><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-e01ae258><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-e01ae258><circle cx="12" cy="12" r="2"></circle><circle cx="19" cy="12" r="2"></circle><circle cx="5" cy="12" r="2"></circle></svg></button><div class="menu" data-v-e01ae258><div class="VPMenu" data-v-e01ae258 data-v-d88c1780><!----><!--[--><!--[--><!----><div class="group" data-v-17654806><div class="item appearance" data-v-17654806><p class="label" data-v-17654806>Appearance</p><div class="appearance-action" data-v-17654806><label title="toggle dark mode" data-v-17654806 data-v-f8d4c7de><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-f8d4c7de data-v-e018e593><span class="check" data-v-e018e593><span class="icon" data-v-e018e593><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-f8d4c7de><path d="M12,18c-3.3,0-6-2.7-6-6s2.7-6,6-6s6,2.7,6,6S15.3,18,12,18zM12,8c-2.2,0-4,1.8-4,4c0,2.2,1.8,4,4,4c2.2,0,4-1.8,4-4C16,9.8,14.2,8,12,8z"></path><path d="M12,4c-0.6,0-1-0.4-1-1V1c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,3.6,12.6,4,12,4z"></path><path d="M12,24c-0.6,0-1-0.4-1-1v-2c0-0.6,0.4-1,1-1s1,0.4,1,1v2C13,23.6,12.6,24,12,24z"></path><path d="M5.6,6.6c-0.3,0-0.5-0.1-0.7-0.3L3.5,4.9c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C6.2,6.5,5.9,6.6,5.6,6.6z"></path><path d="M19.8,20.8c-0.3,0-0.5-0.1-0.7-0.3l-1.4-1.4c-0.4-0.4-0.4-1,0-1.4s1-0.4,1.4,0l1.4,1.4c0.4,0.4,0.4,1,0,1.4C20.3,20.7,20,20.8,19.8,20.8z"></path><path d="M3,13H1c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S3.6,13,3,13z"></path><path d="M23,13h-2c-0.6,0-1-0.4-1-1s0.4-1,1-1h2c0.6,0,1,0.4,1,1S23.6,13,23,13z"></path><path d="M4.2,20.8c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C4.7,20.7,4.5,20.8,4.2,20.8z"></path><path d="M18.4,6.6c-0.3,0-0.5-0.1-0.7-0.3c-0.4-0.4-0.4-1,0-1.4l1.4-1.4c0.4-0.4,1-0.4,1.4,0s0.4,1,0,1.4l-1.4,1.4C18.9,6.5,18.6,6.6,18.4,6.6z"></path></svg><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="moon" data-v-f8d4c7de><path d="M12.1,22c-0.3,0-0.6,0-0.9,0c-5.5-0.5-9.5-5.4-9-10.9c0.4-4.8,4.2-8.6,9-9c0.4,0,0.8,0.2,1,0.5c0.2,0.3,0.2,0.8-0.1,1.1c-2,2.7-1.4,6.4,1.3,8.4c2.1,1.6,5,1.6,7.1,0c0.3-0.2,0.7-0.3,1.1-0.1c0.3,0.2,0.5,0.6,0.5,1c-0.2,2.7-1.5,5.1-3.6,6.8C16.6,21.2,14.4,22,12.1,22zM9.3,4.4c-2.9,1-5,3.6-5.2,6.8c-0.4,4.4,2.8,8.3,7.2,8.7c2.1,0.2,4.2-0.4,5.8-1.8c1.1-0.9,1.9-2.1,2.4-3.4c-2.5,0.9-5.3,0.5-7.5-1.1C9.2,11.4,8.1,7.7,9.3,4.4z"></path></svg><!--]--></span></span></button></label></div></div></div><div class="group" data-v-17654806><div class="item social-links" data-v-17654806><div class="VPSocialLinks social-links-list" data-v-17654806 data-v-3b7cc406><!--[--><a class="VPSocialLink" href="https://github.com/501351981/vue-office" aria-label="github" target="_blank" rel="noopener" data-v-3b7cc406 data-v-d7042ecc><svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>GitHub</title><path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg></a><!--]--></div></div></div><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-f3dacc09 data-v-db3267d6><span class="container" data-v-db3267d6><span class="top" data-v-db3267d6></span><span class="middle" data-v-db3267d6></span><span class="bottom" data-v-db3267d6></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-a484e24a data-v-b003dbae><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-b003dbae><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-b003dbae><path d="M17,11H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,11,17,11z"></path><path d="M21,7H3C2.4,7,2,6.6,2,6s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,7,21,7z"></path><path d="M21,15H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h18c0.6,0,1,0.4,1,1S21.6,15,21,15z"></path><path d="M17,19H3c-0.6,0-1-0.4-1-1s0.4-1,1-1h14c0.6,0,1,0.4,1,1S17.6,19,17,19z"></path></svg><span class="menu-text" data-v-b003dbae>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-b003dbae data-v-539129c1><button data-v-539129c1>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-a484e24a data-v-dc12acb6><div class="curtain" data-v-dc12acb6></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-dc12acb6><span class="visually-hidden" id="sidebar-aria-label" data-v-dc12acb6> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-dc12acb6><section class="VPSidebarItem level-0 has-active" data-v-dc12acb6 data-v-93d36c98><div class="item" role="button" tabindex="0" data-v-93d36c98><div class="indicator" data-v-93d36c98></div><h2 class="text" data-v-93d36c98>配置参考</h2><!----></div><div class="items" data-v-93d36c98><!--[--><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-93d36c98 data-v-93d36c98><div class="item" data-v-93d36c98><div class="indicator" data-v-93d36c98></div><a class="VPLink link link" href="/vue-office/examples/docs/config/" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>属性</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-93d36c98 data-v-93d36c98><div class="item" data-v-93d36c98><div class="indicator" data-v-93d36c98></div><a class="VPLink link link" href="/vue-office/examples/docs/config/event.html" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>事件</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-a484e24a data-v-8fb2403f><div class="VPDoc has-sidebar has-aside" data-v-8fb2403f data-v-aa7e4f8a><!--[--><!--]--><div class="container" data-v-aa7e4f8a><div class="aside" data-v-aa7e4f8a><div class="aside-curtain" data-v-aa7e4f8a></div><div class="aside-container" data-v-aa7e4f8a><div class="aside-content" data-v-aa7e4f8a><div class="VPDocAside" data-v-aa7e4f8a data-v-70f1dff2><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-70f1dff2 data-v-4c887018><div class="content" data-v-4c887018><div class="outline-marker" data-v-4c887018></div><div class="outline-title" data-v-4c887018>跳转到</div><nav aria-labelledby="doc-outline-aria-label" data-v-4c887018><span class="visually-hidden" id="doc-outline-aria-label" data-v-4c887018> Table of Contents for current page </span><ul class="root" data-v-4c887018 data-v-51078a54><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-70f1dff2></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-aa7e4f8a><div class="content-container" data-v-aa7e4f8a><!--[--><!--]--><!----><main class="main" data-v-aa7e4f8a><div style="position:relative;" class="vp-doc _vue-office_examples_docs_config_index" data-v-aa7e4f8a><div><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在默认渲染的列表宽度上再加 Npx宽</p><p>heightOffset在默认渲染的列表高度上再加 Npx高</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;">10</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;">10</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>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#676E95;font-style:italic;">//修改workbookData</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:#A6ACCD;">workbookData</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:#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;">&quot;</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">&quot;</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;">&#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></div></div></main><footer class="VPDocFooter" data-v-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><!----></div><div class="pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/config/event.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>事件</span></a></div></div></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
<script>__VP_HASH_MAP__ = JSON.parse("{\"config_event.md\":\"cbedfdd0\",\"guide_contact.md\":\"10c84e73\",\"config_index.md\":\"a066edee\",\"guide_index.md\":\"59f780b1\",\"guide_js-preview.md\":\"d8c75dcf\",\"guide_faq.md\":\"fc7d1e4f\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-docx.md\":\"747caaea\",\"guide_preview-pdf.md\":\"9bd426ea\"}")
__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>
</html>