如何实现textarea内容导出为PDF、DOC、Excel格式文件？

嘿，我来帮你搞定这个导出功能！结合你给出的HTML，我们可以通过AngularJS控制器配合几个常用前端库来实现这三个导出需求。下面是完整的解决方案，包含改造后的页面结构和功能逻辑：

第一步：调整HTML结构并引入必要资源 #

首先把你的原始HTML改成AngularJS规范的结构，添加指令绑定数据和事件，同时引入实现导出所需的工具库：

<html ng-app="exportApp">
<head>
    <title>File Export</title>
    <!-- 引入AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
    <!-- 引入jsPDF用于PDF导出 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <!-- 引入SheetJS用于Excel导出 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
</head>
<body ng-controller="ExportController">
    <p>Reason:</p>
    <div>
        <textarea ng-model="exportContent" rows="4" cols="70" placeholder="输入要导出的内容..."></textarea>
    </div>
    <div style="margin-top: 10px;">
        <button ng-click="exportToPDF()">导出为PDF</button>
        <button ng-click="exportToDOC()" style="margin-left: 10px;">导出为DOC</button>
        <button ng-click="exportToExcel()" style="margin-left: 10px;">导出为Excel</button>
    </div>
</body>
</html>

第二步：编写AngularJS控制器逻辑 #

创建AngularJS模块和控制器，实现三个导出函数，同时加入空内容判断避免无效操作：

angular.module('exportApp', [])
.controller('ExportController', ['$scope', function($scope) {
    // 初始化导出内容为空
    $scope.exportContent = '';

    // 导出为PDF
    $scope.exportToPDF = function() {
        if (!$scope.exportContent.trim()) {
            alert('请先输入内容！');
            return;
        }
        // 初始化jsPDF实例
        const { jsPDF } = window.jspdf;
        const doc = new jsPDF();
        // 设置字体大小，添加文本并自动换行
        doc.setFontSize(12);
        doc.text($scope.exportContent, 10, 10, { maxWidth: 180 });
        // 保存PDF文件
        doc.save('导出内容.pdf');
    };

    // 导出为DOC
    $scope.exportToDOC = function() {
        if (!$scope.exportContent.trim()) {
            alert('请先输入内容！');
            return;
        }
        // 创建Blob对象，指定Word文档的MIME类型
        const blob = new Blob([$scope.exportContent], { type: 'application/msword' });
        // 创建临时下载链接并触发下载
        const url = URL.createObjectURL(blob);
        const downloadLink = document.createElement('a');
        downloadLink.href = url;
        downloadLink.download = '导出内容.doc';
        downloadLink.click();
        // 释放临时URL资源
        URL.revokeObjectURL(url);
    };

    // 导出为Excel
    $scope.exportToExcel = function() {
        if (!$scope.exportContent.trim()) {
            alert('请先输入内容！');
            return;
        }
        // 创建工作表，将内容放入指定单元格
        const worksheet = XLSX.utils.aoa_to_sheet([
            ['导出内容'],
            [$scope.exportContent]
        ]);
        // 创建工作簿并添加工作表
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
        // 导出Excel文件
        XLSX.writeFile(workbook, '导出内容.xlsx');
    };
}]);

功能细节说明 #

• PDF导出：借助jsPDF库生成PDF文档，支持自动换行，如果你需要更复杂的格式（比如标题样式、分段），可以扩展jsPDF的API进行调整。
• DOC导出：利用浏览器原生Blob API封装文本内容为Word格式，适合简单文本导出；如果需要复杂排版（比如字体、段落样式），可以考虑使用docxtemplater这类专业库。
• Excel导出：通过SheetJS库创建标准xlsx文件，示例中将内容放入单个单元格，若需要拆分多行文本到不同单元格，可以先按换行符切割内容再传入工作表。

注意事项 #

• 所有导出函数都加入了空内容校验，避免用户导出空文件。
• 如果你不想使用CDN引入库，可以下载对应库的本地文件，修改script标签的src路径为本地文件地址即可。

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