office.html 1.7 KB

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