office.html 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
  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 th:src="@{/static/weboffice/web-office-sdk-v1.1.2.umd.js}"></script>
  9. <script th:src="@{/static/weboffice/jwps.js}"></script>
  10. <script th:inline="javascript">
  11. var wps;
  12. const filename = [[${filename}]];
  13. const fileid = [[${fileid}]]
  14. var ready = true
  15. var ctx = [[${webctx}]]
  16. function openFile() {
  17. ;
  18. $.get(ctx + "/weboffice/url?_w_fname=" + filename + "&_w_fileid=" + fileid, function (result) {
  19. // url这个样子 : https://wwo.wps.cn/office/w/471eba5030?_w_fname=会议纪要.docx&_w_userid=33&_w_appid=d8f99da
  20. wps = WebOfficeSDK.config({
  21. wpsUrl: result.wpsUrl,
  22. mount: document.querySelector('.custom-mount')
  23. });
  24. wps.setToken({token: result.token});
  25. // await wps.WordApplication().ActiveDocument.ReplaceText([{key: '${name}', value: '刘高峰'}])
  26. })
  27. }
  28. async
  29. function exportPdf() {
  30. var result = await
  31. wps.WordApplication().ActiveDocument.ExportAsFixedFormat();
  32. alert(result.url);
  33. }
  34. openFile();
  35. </script>
  36. <style>
  37. * {
  38. box-sizing: border-box;
  39. }
  40. html,
  41. body {
  42. display: flex;
  43. flex-direction: column;
  44. padding: 0;
  45. margin: 0;
  46. height: 100%;
  47. /* 防止双击缩放 */
  48. touch-action: manipulation;
  49. }
  50. iframe {
  51. flex: 1;
  52. }
  53. </style>
  54. </html>