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
vue-office/examples/docs/guide/preview-xlsx.html
liyulin ad0214f893 add: pdf 改为虚拟列表渲染
2024-04-17 20:38:25 +08:00

65 lines
30 KiB
JavaScript
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>xlsx文件预览 | 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/guide_preview-xlsx.md.12045179.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" 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" 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/guide/" 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/guide/preview-docx.html" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>docx文件预览</p><!--]--><!----></a><!----></div><!----></div><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/guide/preview-xlsx.html" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>xlsx文件预览</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/guide/preview-pdf.html" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>pdf文件预览</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/guide/js-preview.html" data-v-93d36c98 data-v-3ef3daad><!--[--><p class="text" data-v-93d36c98>非Vue框架进行文件预览</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/guide/faq.html" 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/guide/contact.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_guide_preview-xlsx" data-v-aa7e4f8a><div><h1 id="xlsx文件预览" tabindex="-1">xlsx文件预览 <a class="header-anchor" href="#xlsx文件预览" aria-label="Permalink to &quot;xlsx文件预览&quot;">​</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 &quot;使用网络地址预览&quot;">​</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;">&lt;</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&lt;</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;">&quot;</span><span style="color:#C3E88D;">excel</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> </span><span style="color:#C792EA;">:options</span><span style="color:#89DDFF;">=</span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">options</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">height: 100vh;</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">renderedHandler</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">errorHandler</span><span style="color:#89DDFF;">&quot;</span></span>
<span class="line"><span style="color:#89DDFF;"> /&gt;</span></span>
<span class="line"><span style="color:#89DDFF;">&lt;/</span><span style="color:#F07178;">template</span><span style="color:#89DDFF;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#89DDFF;">&lt;</span><span style="color:#F07178;">script</span><span style="color:#89DDFF;">&gt;</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;">&#39;</span><span style="color:#C3E88D;">@vue-office/excel</span><span style="color:#89DDFF;">&#39;</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;">&#39;</span><span style="color:#C3E88D;">@vue-office/excel/lib/index.css</span><span style="color:#89DDFF;">&#39;</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;"> options</span><span style="color:#89DDFF;">:{</span></span>
<span class="line"><span style="color:#F07178;"> xls</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;">//预览xlsx文件设为false；预览xls文件设为true</span></span>
<span class="line"><span style="color:#F07178;"> minColLength</span><span style="color:#89DDFF;">:</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;">// excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</span></span>
<span class="line"><span style="color:#F07178;"> minRowLength</span><span style="color:#89DDFF;">:</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;">// excel最少渲染多少行，如果想实现根据xlsx实际函数渲染，可以将此值设置为0.</span></span>
<span class="line"><span style="color:#F07178;"> widthOffset</span><span style="color:#89DDFF;">:</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;">//如果渲染出来的结果感觉单元格宽度不够，可以在默认渲染的列表宽度上再加 Npx宽</span></span>
<span class="line"><span style="color:#F07178;"> heightOffset</span><span style="color:#89DDFF;">:</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;">//在默认渲染的列表高度上再加 Npx高</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">beforeTransformData</span><span style="color:#89DDFF;">:</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 style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</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 style="color:#676E95;font-style:italic;">//底层通过exceljs获取excel文件内容，通过该钩子函数，可以对获取的excel文件内容进行修改，比如某个单元格的数据显示不正确，可以在此自行修改每个单元格的value值。</span></span>
<span class="line"><span style="color:#F07178;"> </span><span style="color:#82AAFF;">transformData</span><span style="color:#89DDFF;">:</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 style="color:#F07178;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#F07178;"> </span><span style="color:#89DDFF;">{</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 style="color:#676E95;font-style:italic;">//将获取到的excel数据进行处理之后且渲染到页面之前，可通过transformData对即将渲染的数据及样式进行修改，此时每个单元格的text值就是即将渲染到页面上的内容</span></span>
<span class="line"><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;">&#39;</span><span style="color:#C3E88D;">http://static.shanhuxueyuan.com/demo/excel.xlsx</span><span style="color:#89DDFF;">&#39;</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;">&quot;</span><span style="color:#C3E88D;">渲染完成</span><span style="color:#89DDFF;">&quot;</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;">&quot;</span><span style="color:#C3E88D;">渲染失败</span><span style="color:#89DDFF;">&quot;</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;">&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-aa7e4f8a data-v-6701008d><!--[--><!--]--><!----><div class="prev-next" data-v-6701008d><div class="pager" data-v-6701008d><a class="pager-link prev" href="/vue-office/examples/docs/guide/preview-docx.html" data-v-6701008d><span class="desc" data-v-6701008d>上一页</span><span class="title" data-v-6701008d>docx文件预览</span></a></div><div class="has-prev pager" data-v-6701008d><a class="pager-link next" href="/vue-office/examples/docs/guide/preview-pdf.html" data-v-6701008d><span class="desc" data-v-6701008d>下一页</span><span class="title" data-v-6701008d>pdf文件预览</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\":\"95a7c30b\",\"guide_js-preview.md\":\"f1b307fb\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"index.md\":\"2dfe7e9d\",\"guide_preview-xlsx.md\":\"12045179\",\"guide_faq.md\":\"fc7d1e4f\",\"guide_preview-pdf.md\":\"56fbeb2e\"}")
__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>
Reference in New Issue View Git Blame Copy Permalink