index.html 1.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253
  1. <!DOCTYPE html>
  2. <html>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  4. <body>
  5. <div class="custom-mount" style="height: 100%"></div>
  6. </body>
  7. <script src="https://qn.cache.wpscdn.cn/js/jquery-1.9.1.min.js"></script>
  8. <script src="web-office-sdk-v1.1.2.umd.js"></script>
  9. <script src="./jwps.js"></script>
  10. <script>
  11. var wps;
  12. function openFile() {;
  13. $.get("/weboffice/url?_w_fname=" + filename, function (result) {
  14. console.log(result);
  15. // url这个样子 : https://wwo.wps.cn/office/w/471eba5030?_w_fname=会议纪要.docx&_w_userid=33&_w_appid=d8f99da
  16. wps = WebOfficeSDK.config({
  17. wpsUrl: result.wpsUrl,
  18. mount: document.querySelector('.custom-mount')
  19. });
  20. wps.setToken({token: result.token});
  21. })
  22. }
  23. async function exportPdf() {
  24. var result = await wps.WordApplication().ActiveDocument.ExportAsFixedFormat();
  25. alert(result.url);
  26. }
  27. </script>
  28. <style>
  29. * {
  30. box-sizing: border-box;
  31. }
  32. html,
  33. body {
  34. display: flex;
  35. flex-direction: column;
  36. padding: 0;
  37. margin: 0;
  38. height: 100%;
  39. /* 防止双击缩放 */
  40. touch-action: manipulation;
  41. }
  42. iframe {
  43. flex: 1;
  44. }
  45. </style>
  46. </html>