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/js-preview.html

85 lines
47 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框架文件预览 | 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_js-preview.md.873b3161.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:&#39;Meta&#39;;" 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" 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 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/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_js-preview" data-v-76ac46f7><div><h1 id="非vue框架文件预览" tabindex="-1">非Vue框架文件预览 <a class="header-anchor" href="#非vue框架文件预览" aria-label="Permalink to &quot;非Vue框架文件预览&quot;">​</a></h1><p>为了在非Vue的框架中进行Office文件预览，增加了通过js进行预览的方式。</p><p>docx、excel、pdf三个预览库的API几乎一致，只需要初始化时传入要挂载的Dom，然后传递要预览的文件地址，即可完成预览，非常地简单。</p><h2 id="docx文件预览" tabindex="-1">docx文件预览 <a class="header-anchor" href="#docx文件预览" aria-label="Permalink to &quot;docx文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/docx</span></span></code></pre></div><ul><li>预览</li></ul><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;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewDocx </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/docx</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</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;">@js-preview/docx/lib/index.css</span><span style="color:#89DDFF;">&#39;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//初始化时指明要挂载的父元素Dom节点</span></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myDocxPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewDocx</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">docx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#676E95;font-style:italic;">//传递要预览的文件地址即可</span></span>
<span class="line"><span style="color:#A6ACCD;">myDocxPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.docx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="excel文件预览" tabindex="-1">excel文件预览 <a class="header-anchor" href="#excel文件预览" aria-label="Permalink to &quot;excel文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/excel</span></span></code></pre></div><ul><li>预览</li></ul><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;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewExcel </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/excel</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</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;">@js-preview/excel/lib/index.css</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myExcelPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewExcel</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">excel</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myExcelPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.xlsx</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="pdf文件预览" tabindex="-1">pdf文件预览 <a class="header-anchor" href="#pdf文件预览" aria-label="Permalink to &quot;pdf文件预览&quot;">​</a></h2><ul><li>安装依赖库</li></ul><div class="language-shell"><button title="Copy Code" class="copy"></button><span class="lang">shell</span><pre class="shiki material-theme-palenight"><code><span class="line"><span style="color:#676E95;font-style:italic;"># docx文件预览库</span></span>
<span class="line"><span style="color:#FFCB6B;">npm</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">i</span><span style="color:#A6ACCD;"> </span><span style="color:#C3E88D;">@js-preview/pdf</span></span></code></pre></div><ul><li>预览</li></ul><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;font-style:italic;">import</span><span style="color:#A6ACCD;"> jsPreviewPdf </span><span style="color:#89DDFF;font-style:italic;">from</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">&quot;</span><span style="color:#C3E88D;">@js-preview/pdf</span><span style="color:#89DDFF;">&quot;</span><span style="color:#89DDFF;">;</span></span>
<span class="line"></span>
<span class="line"><span style="color:#C792EA;">const</span><span style="color:#A6ACCD;"> myPdfPreviewer </span><span style="color:#89DDFF;">=</span><span style="color:#A6ACCD;"> jsPreviewPdf</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">init</span><span style="color:#A6ACCD;">(document</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">getElementById</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">))</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;">myPdfPreviewer</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">preview</span><span style="color:#A6ACCD;">(</span><span style="color:#89DDFF;">&#39;</span><span style="color:#C3E88D;">https://501351981.github.io/vue-office/examples/dist/static/test-files/test.pdf</span><span style="color:#89DDFF;">&#39;</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">then</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">res</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览完成</span><span style="color:#89DDFF;">&#39;</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span><span style="color:#89DDFF;">.</span><span style="color:#82AAFF;">catch</span><span style="color:#A6ACCD;">(</span><span style="color:#A6ACCD;font-style:italic;">e</span><span style="color:#C792EA;">=&gt;</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;">&#39;</span><span style="color:#C3E88D;">预览失败</span><span style="color:#89DDFF;">&#39;</span><span style="color:#89DDFF;">,</span><span style="color:#F07178;"> </span><span style="color:#A6ACCD;">e</span><span style="color:#F07178;">)</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#89DDFF;">}</span><span style="color:#A6ACCD;">)</span></span></code></pre></div><h2 id="api" tabindex="-1">API <a class="header-anchor" href="#api" aria-label="Permalink to &quot;API&quot;">​</a></h2><h3 id="init方法" tabindex="-1">init方法 <a class="header-anchor" href="#init方法" aria-label="Permalink to &quot;init方法&quot;">​</a></h3><p>三种库的init方法保持一致，init方法会返回预览对象。</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;">init</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">(</span><span style="color:#A6ACCD;font-style:italic;">container</span><span style="color:#89DDFF;">:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">HTMLElement</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">options</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#89DDFF;">,</span><span style="color:#A6ACCD;"> </span><span style="color:#A6ACCD;font-style:italic;">requestOptions</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">any</span><span style="color:#89DDFF;">)</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">=&gt;</span><span style="color:#A6ACCD;"> JsPdfPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;"> JsExcelPreview </span><span style="color:#89DDFF;">|</span><span style="color:#A6ACCD;">JsDocxPreview</span><span style="color:#89DDFF;">;</span></span></code></pre></div><ul><li>container</li></ul><p>预览挂载的父容器Dom</p><ul><li>options</li></ul><p>预览支持的配置参数，三个预览库支持的配置不同。</p><p>docx预览支持的配置，详细说明见库docx-preview：</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">inWrapper</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreWidth</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreHeight</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreFonts</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:#A6ACCD;"> </span><span style="color:#F07178;">breakPages</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:#A6ACCD;"> </span><span style="color:#F07178;">debug</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:#A6ACCD;"> </span><span style="color:#F07178;">experimental</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:#A6ACCD;"> </span><span style="color:#F07178;">className</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">trimXmlDeclaration</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:#A6ACCD;"> </span><span style="color:#F07178;">renderHeaders</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:#A6ACCD;"> </span><span style="color:#F07178;">renderFooters</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:#A6ACCD;"> </span><span style="color:#F07178;">renderFootnotes</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:#A6ACCD;"> </span><span style="color:#F07178;">renderEndnotes</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:#A6ACCD;"> </span><span style="color:#F07178;">ignoreLastRenderedPageBreak</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:#A6ACCD;"> </span><span style="color:#F07178;">useBase64URL</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:#A6ACCD;"> </span><span style="color:#F07178;">useMathMLPolyfill</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:#A6ACCD;"> </span><span style="color:#F07178;">renderChanges</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><p>excel支持的配置</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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">minColLength</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//excel最少渲染多少列，如果想实现xlsx文件内容有几列，就渲染几列，可以将此值设置为0.</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">showContextmenu</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">boolean</span><span style="color:#89DDFF;">;</span><span style="color:#A6ACCD;"> </span><span style="color:#676E95;font-style:italic;">//是否显示右键菜单，默认false</span></span>
<span class="line"><span style="color:#89DDFF;">}</span></span></code></pre></div><p>pdf支持的配置，详情见<a href="https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html" target="_blank" rel="noreferrer">https://mozilla.github.io/pdf.js/api/draft/module-pdfjsLib.html</a></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:#89DDFF;font-style:italic;">export</span><span style="color:#A6ACCD;"> </span><span style="color:#C792EA;">interface</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">Options</span><span style="color:#A6ACCD;"> </span><span style="color:#89DDFF;">{</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">staticFileUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</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:#FFCB6B;">number</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:#FFCB6B;">BinaryData</span><span style="color:#89DDFF;">;</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:#FFCB6B;">Object</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">withCredentials</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:#A6ACCD;"> </span><span style="color:#F07178;">password</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">length</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">number</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">docBaseUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">cMapUrl</span><span style="color:#89DDFF;">?:</span><span style="color:#A6ACCD;"> </span><span style="color:#FFCB6B;">string</span><span style="color:#89DDFF;">;</span></span>
<span class="line"><span style="color:#A6ACCD;"> </span><span style="color:#F07178;">cMapPacked</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:#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="download方法" tabindex="-1">download方法 <a class="header-anchor" href="#download方法" aria-label="Permalink to &quot;download方法&quot;">​</a></h3><p>调用download进行文件下载，参数名为下载的文件名称，可不传。</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;">download</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("{\"guide_contact.md\":\"10c84e73\",\"config_event.md\":\"cbedfdd0\",\"config_index.md\":\"a8895489\",\"guide_preview-xlsx.md\":\"0de0ac4e\",\"guide_preview-pdf.md\":\"9bd426ea\",\"index.md\":\"2dfe7e9d\",\"guide_js-preview.md\":\"873b3161\",\"guide_index.md\":\"59f780b1\",\"guide_preview-docx.md\":\"747caaea\",\"guide_faq.md\":\"c0a76c24\"}")
__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