如何基于Angular 1.x实现HTML文档生成、下载及视图展示（对接Java端点）

针对你的需求，我来一步步拆解「下载HTML文件」和「预览HTML内容」这两个功能的实现方式，结合Angular 1.x的特性来完成：

一、实现「下载」功能 #

当用户点击「下载」按钮时，我们需要调用后端的getHtmlContent接口拿到HTML字符串，然后把它转换成可下载的文件：

步骤与代码示例 #

1. 在Angular控制器中注入$http服务，用来发起接口请求
2. 把接口返回的HTML字符串包装成Blob对象（这是浏览器用来处理二进制/文本文件的对象）
3. 创建临时的<a>标签，设置下载相关属性，触发点击后清理临时元素

angular.module('myApp').controller('HtmlController', ['$http', function($http) {
  var vm = this;

  // 下载HTML文件的方法
  vm.downloadHtml = function() {
    // 调用后端getHtmlContent接口
    $http.get('/api/getHtmlContent')
      .then(function(response) {
        var htmlContent = response.data;
        // 创建Blob对象，指定MIME类型为text/html
        var blob = new Blob([htmlContent], { type: 'text/html' });
        // 创建临时URL指向Blob
        var url = window.URL.createObjectURL(blob);
        // 创建临时a标签
        var a = document.createElement('a');
        a.href = url;
        // 设置下载文件名
        a.download = 'content.html';
        // 触发点击事件
        document.body.appendChild(a);
        a.click();
        // 清理临时元素和URL
        document.body.removeChild(a);
        window.URL.revokeObjectURL(url);
      })
      .catch(function(error) {
        console.error('获取HTML内容失败:', error);
      });
  };
}]);

在模板中绑定按钮：

<button ng-click="vm.downloadHtml()">下载</button>

二、实现「查看」功能 #

点击「查看」时，需要把接口返回的HTML字符串安全地渲染到页面上，这里要注意Angular的安全机制，直接绑定HTML会被过滤，所以需要用到$sce服务标记内容为安全：

步骤与代码示例 #

1. 在控制器中注入$sce服务
2. 获取HTML字符串后，用$sce.trustAsHtml()把内容标记为可信任的HTML
3. 在模板中用ng-bind-html指令渲染内容

angular.module('myApp').controller('HtmlController', ['$http', '$sce', function($http, $sce) {
  var vm = this;
  vm.previewHtml = '';

  // 预览HTML内容的方法
  vm.viewHtml = function() {
    $http.get('/api/getHtmlContent')
      .then(function(response) {
        // 标记HTML内容为安全，允许渲染
        vm.previewHtml = $sce.trustAsHtml(response.data);
      })
      .catch(function(error) {
        console.error('获取HTML内容失败:', error);
      });
  };
}]);

在模板中添加预览区域：

<button ng-click="vm.viewHtml()">查看</button>
<!-- 预览区域 -->
<div ng-bind-html="vm.previewHtml" class="html-preview"></div>

注意事项 #

• 确保后端返回的HTML字符串是正确解码后的内容（比如你的示例中<pre>会被浏览器自动解码成<pre>，如果接口返回的是转义后的字符串，Angular在渲染时会自动处理）
• 对于下载功能，部分旧浏览器可能不支持Blob和URL.createObjectURL，如果需要兼容，可以考虑使用data URI的方式，但大文件推荐用Blob

内容的提问来源于stack exchange，提问作者nisha kanani