open_multiple_pdfs.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>正在打开 PDF...</title>
  7. <style>
  8. body {
  9. font-family: 'Microsoft YaHei', sans-serif;
  10. display: flex;
  11. justify-content: center;
  12. align-items: center;
  13. height: 100vh;
  14. margin: 0;
  15. background: #F5F5F7;
  16. }
  17. .container {
  18. text-align: center;
  19. padding: 2rem;
  20. }
  21. .spinner {
  22. border: 4px solid #f3f3f3;
  23. border-top: 4px solid #3498db;
  24. border-radius: 50%;
  25. width: 40px;
  26. height: 40px;
  27. animation: spin 1s linear infinite;
  28. margin: 0 auto 1rem;
  29. }
  30. @keyframes spin {
  31. 0% { transform: rotate(0deg); }
  32. 100% { transform: rotate(360deg); }
  33. }
  34. .hidden {
  35. display: none;
  36. }
  37. </style>
  38. </head>
  39. <body>
  40. <div class="container">
  41. <div class="spinner"></div>
  42. <p>正在打开 PDF 文件...</p>
  43. </div>
  44. <!-- 使用隐藏的 <a> 标签,通过自动点击来打开 PDF(避免浏览器拦截) -->
  45. <div id="pdf-links" class="hidden">
  46. {% for url in pdf_urls %}
  47. <a href="{{ url }}" target="_blank" id="pdf-link-{{ loop.index0 }}"></a>
  48. {% endfor %}
  49. </div>
  50. <script>
  51. // 使用 <a> 标签自动点击来打开 PDF(避免浏览器拦截)
  52. const pdfUrls = {{ pdf_urls | tojson }};
  53. console.log('PDF URLs:', pdfUrls);
  54. if (pdfUrls && pdfUrls.length > 0) {
  55. // 立即打开第一个(用户点击触发的,不会被拦截)
  56. const firstLink = document.getElementById('pdf-link-0');
  57. if (firstLink) {
  58. firstLink.click();
  59. }
  60. // 延迟打开其他的(在用户交互的上下文中,通常不会被拦截)
  61. pdfUrls.forEach((url, index) => {
  62. if (index === 0) return; // 第一个已经打开了
  63. setTimeout(() => {
  64. const link = document.getElementById(`pdf-link-${index}`);
  65. if (link) {
  66. link.click();
  67. } else {
  68. // 如果找不到链接,尝试用 window.open(可能被拦截)
  69. window.open(url, '_blank');
  70. }
  71. }, index * 200);
  72. });
  73. // 2 秒后提示可以关闭
  74. setTimeout(() => {
  75. document.querySelector('.container p').textContent = 'PDF 已在新标签页打开,可以关闭此窗口';
  76. }, 2000);
  77. } else {
  78. document.querySelector('.container p').textContent = '没有找到 PDF 文件';
  79. }
  80. </script>
  81. </body>
  82. </html>