要在JavaScript中直接预览一个在线的HTML文件，可以采用以下几种方法：

使用iframe标签

  • 这是最简单的方法之一。你可以创建一个iframe元素，并设置其src属性为在线HTML文件的URL。
  • 示例代码：
    1
    2
    3
    const iframe = document.createElement('iframe');
    iframe.src = 'https://example.com/your-online-html-file.html';
    document.body.appendChild(iframe);

使用window.open方法

  • 可以通过window.open方法打开一个新的浏览器窗口或标签页来预览在线HTML文件。
  • 示例代码：
    1
    window.open('https://example.com/your-online-html-file.html', '_blank');

这种方式可能会直接触发浏览器的下载行为，而不是预览，可以参考

使用fetchAPI加载并插入DOM

  • 如果你需要更复杂的控制，比如在当前页面内动态加载并显示HTML内容，可以使用fetch API获取HTML内容，然后将其插入到指定的容器中。
  • 注意：由于跨域资源共享（CORS）策略，这种方法可能受限于目标服务器的配置。
  • 示例代码：
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    fetch('https://example.com/your-online-html-file.html')
      .then(response => response.text())
      .then(html => {
       	// 创建新窗口
        const newWindow = window.open('', '_blank');

        // 确保新窗口已经加载完成
        if (newWindow) {
          newWindow.document.open();
          newWindow.document.write(html);
          newWindow.document.close();
        } else {
          console.error('无法打开新窗口');
        }
      })
      .catch(error => console.error('Error fetching the HTML file:', error));

封装fetch预览方法

方法封装

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
/**
 * 预览html文件
 * @param htmlUrl html文件地址
 */
export async function previewHtml(htmlUrl) {
  if (!htmlUrl) {
    console.error('HTML URL is required')
    return
  }

  try {
    const response = await fetch(htmlUrl)
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const html = await response.text()
    // 创建新窗口
    const newWindow = window.open('', '_blank')
    // 确保新窗口已经加载完成
    if (newWindow) {
      newWindow.document.open()
      newWindow.document.write(html)
      newWindow.document.close()
    } else {
      console.error('无法打开新窗口')
    }
  } catch (e) {
    console.error('Error fetching the HTML file:', e)
    return Promise.reject(e)
  }
}

使用

1
2
3
4
5
6
preview() {
  showLoading()
  previewHtml(this.multiQcHtml).then(() => {
    hideLoading()
  })
},