mirror of
https://github.com/501351981/vue-office.git
synced 2025-06-15 07:00:00 +08:00
55 lines
26 KiB
HTML
55 lines
26 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-US" dir="ltr">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>xlsx文件预览 | vue-office</title>
|
||
<meta name="description" content="更简单的office文件预览">
|
||
<link rel="preload stylesheet" href="/vue-office/examples/docs/assets/style.e49da7da.css" as="style">
|
||
<script type="module" src="/vue-office/examples/docs/assets/app.32d97b1d.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.585d8d97.js">
|
||
<link rel="modulepreload" href="/vue-office/examples/docs/assets/guide_preview-xlsx.md.0de0ac4e.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-f4cfe196><!--[--><!--]--><!--[--><span tabindex="-1" data-v-ab02f3a9></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-ab02f3a9> Skip to content </a><!--]--><!----><header class="VPNav" data-v-f4cfe196 data-v-baebc274><div class="VPNavBar has-sidebar" data-v-baebc274 data-v-e0904804><div class="container" data-v-e0904804><div class="title" data-v-e0904804><div class="VPNavBarTitle has-sidebar" data-v-e0904804 data-v-e2754098><a class="title" href="/vue-office/examples/docs/" data-v-e2754098><!--[--><!--]--><!----><!--[-->vue-office<!--]--><!--[--><!--]--></a></div></div><div class="content" data-v-e0904804><div class="curtain" data-v-e0904804></div><div class="content-body" data-v-e0904804><!--[--><!--]--><div class="VPNavBarSearch search" style="--vp-meta-key:'Meta';" data-v-e0904804><!----></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-e0904804 data-v-b6da696d><span id="main-nav-aria-label" class="visually-hidden" data-v-b6da696d>Main Navigation</span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-office/examples/docs/guide/" tabindex="0" data-v-b6da696d data-v-893f2b8d data-v-f202934c><!--[-->指南<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/vue-office/examples/docs/config/" tabindex="0" data-v-b6da696d data-v-893f2b8d data-v-f202934c><!--[-->配置参考<!--]--><!----></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="https://501351981.github.io/vue-office/examples/dist/" target="_blank" rel="noreferrer" tabindex="0" data-v-b6da696d data-v-893f2b8d data-v-f202934c><!--[-->演示预览效果<!--]--><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-f202934c><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-e0904804 data-v-4f660b19><label title="toggle dark mode" data-v-4f660b19 data-v-1300d8fa><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-1300d8fa data-v-8b8dafc7><span class="check" data-v-8b8dafc7><span class="icon" data-v-8b8dafc7><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1300d8fa><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-1300d8fa><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-e0904804 data-v-3835a113 data-v-64b76d79><!--[--><a class="VPSocialLink" href="https://github.com/501351981/vue-office" aria-label="github" target="_blank" rel="noopener" data-v-64b76d79 data-v-aa30dbb4><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-e0904804 data-v-c3463154 data-v-98db4e96><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-98db4e96><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="icon" data-v-98db4e96><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-98db4e96><div class="VPMenu" data-v-98db4e96 data-v-42f4d0e0><!----><!--[--><!--[--><!----><div class="group" data-v-c3463154><div class="item appearance" data-v-c3463154><p class="label" data-v-c3463154>Appearance</p><div class="appearance-action" data-v-c3463154><label title="toggle dark mode" data-v-c3463154 data-v-1300d8fa><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" aria-checked="false" data-v-1300d8fa data-v-8b8dafc7><span class="check" data-v-8b8dafc7><span class="icon" data-v-8b8dafc7><!--[--><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="sun" data-v-1300d8fa><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-1300d8fa><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-c3463154><div class="item social-links" data-v-c3463154><div class="VPSocialLinks social-links-list" data-v-c3463154 data-v-64b76d79><!--[--><a class="VPSocialLink" href="https://github.com/501351981/vue-office" aria-label="github" target="_blank" rel="noopener" data-v-64b76d79 data-v-aa30dbb4><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-e0904804 data-v-d49051d0><span class="container" data-v-d49051d0><span class="top" data-v-d49051d0></span><span class="middle" data-v-d49051d0></span><span class="bottom" data-v-d49051d0></span></span></button></div></div></div></div><!----></header><div class="VPLocalNav" data-v-f4cfe196 data-v-ce3cf2b4><button class="menu" aria-expanded="false" aria-controls="VPSidebarNav" data-v-ce3cf2b4><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" viewbox="0 0 24 24" class="menu-icon" data-v-ce3cf2b4><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-ce3cf2b4>Menu</span></button><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-ce3cf2b4 data-v-d4e8665d><button data-v-d4e8665d>Return to top</button><!----></div></div><aside class="VPSidebar" data-v-f4cfe196 data-v-27bc6b66><div class="curtain" data-v-27bc6b66></div><nav class="nav" id="VPSidebarNav" aria-labelledby="sidebar-aria-label" tabindex="-1" data-v-27bc6b66><span class="visually-hidden" id="sidebar-aria-label" data-v-27bc6b66> Sidebar Navigation </span><!--[--><!--]--><!--[--><div class="group" data-v-27bc6b66><section class="VPSidebarItem level-0 has-active" data-v-27bc6b66 data-v-3a7549f8><div class="item" role="button" tabindex="0" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><h2 class="text" data-v-3a7549f8>指南</h2><!----></div><div class="items" data-v-3a7549f8><!--[--><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>快速上手</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>docx文件预览</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link is-active has-active" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/preview-xlsx.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>xlsx文件预览</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>pdf文件预览</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/js-preview.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>非Vue框架进行文件预览</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/faq.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>常见问题</p><!--]--><!----></a><!----></div><!----></div><div class="VPSidebarItem level-1 is-link" data-v-3a7549f8 data-v-3a7549f8><div class="item" data-v-3a7549f8><div class="indicator" data-v-3a7549f8></div><a class="VPLink link link" href="/vue-office/examples/docs/guide/contact.html" data-v-3a7549f8 data-v-f202934c><!--[--><p class="text" data-v-3a7549f8>联系我</p><!--]--><!----></a><!----></div><!----></div><!--]--></div></section></div><!--]--><!--[--><!--]--></nav></aside><div class="VPContent has-sidebar" id="VPContent" data-v-f4cfe196 data-v-4d5890c2><div class="VPDoc has-sidebar has-aside" data-v-4d5890c2 data-v-76ac46f7><!--[--><!--]--><div class="container" data-v-76ac46f7><div class="aside" data-v-76ac46f7><div class="aside-curtain" data-v-76ac46f7></div><div class="aside-container" data-v-76ac46f7><div class="aside-content" data-v-76ac46f7><div class="VPDocAside" data-v-76ac46f7 data-v-7ccd27a3><!--[--><!--]--><!--[--><!--]--><div class="VPDocAsideOutline" data-v-7ccd27a3 data-v-27a9da5b><div class="content" data-v-27a9da5b><div class="outline-marker" data-v-27a9da5b></div><div class="outline-title" data-v-27a9da5b>跳转到</div><nav aria-labelledby="doc-outline-aria-label" data-v-27a9da5b><span class="visually-hidden" id="doc-outline-aria-label" data-v-27a9da5b> Table of Contents for current page </span><ul class="root" data-v-27a9da5b data-v-ec102b3a><!--[--><!--]--></ul></nav></div></div><!--[--><!--]--><div class="spacer" data-v-7ccd27a3></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-76ac46f7><div class="content-container" data-v-76ac46f7><!--[--><!--]--><!----><main class="main" data-v-76ac46f7><div style="position:relative;" class="vp-doc _vue-office_examples_docs_guide_preview-xlsx" data-v-76ac46f7><div><h1 id="xlsx文件预览" tabindex="-1">xlsx文件预览 <a class="header-anchor" href="#xlsx文件预览" aria-label="Permalink to "xlsx文件预览""></a></h1><div class="warning custom-block"><p class="custom-block-title">WARNING</p><p>目前只支持xlsx文件预览，不支持xls文件。</p></div><h2 id="使用网络地址预览" tabindex="-1">使用网络地址预览 <a class="header-anchor" href="#使用网络地址预览" aria-label="Permalink to "使用网络地址预览""></a></h2><div class="language-vue"><button title="Copy Code" class="copy"></button><span class="lang">vue</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;"><</span><span style="color:#F07178;">vue-office-excel</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:src</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">excel</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">style</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">height: 100vh;</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@rendered</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">@error</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">"</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"> /></span></span>
|
||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;"><</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入VueOfficeExcel组件</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> VueOfficeExcel </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/excel</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"><span style="color:#676E95;font-style:italic;">//引入相关样式</span></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">import</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">@vue-office/excel/lib/index.css</span><span style="color:#89DDFF;">'</span></span>
|
||
<span class="line"></span>
|
||
<span class="line"><span style="color:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;font-style:italic;">default</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">components</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> VueOfficeExcel</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">data</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;font-style:italic;">return</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> excel</span><span style="color:#89DDFF;">:</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">'</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/demo/excel.xlsx</span><span style="color:#89DDFF;">'</span><span style="color:#676E95;font-style:italic;">//设置文档地址</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">methods</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">renderedHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">},</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">errorHandler</span><span style="color:#89DDFF;">()</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">console</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">log</span><span style="color:#F07178;">(</span><span style="color:#89DDFF;">"</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">"</span><span style="color:#F07178;">)</span></span>
|
||
<span class="line"><span style="color:#F07178;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;">}</span></span>
|
||
<span class="line"><span style="color:#89DDFF;"></</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">></span></span></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\":\"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>
|
||
</html> |