使用 JavaScript 生成文件
在構建 Web 應用程序時，您經常需要讓用戶能夠以文件的形式下載一段數據。它可以是配置設置、報告或其他動態生成的信息的備份。
這個問題的通常解決方案是使用一個專用的導出腳本，從數據庫中選擇並構建您需要的文件。然而，正如我們將在這個簡短的教程中證明的那樣，還有另一種方法。
我們將製作一個 jQuery 插件，結合一個簡單的 php 腳本，可以生成各種文本文件，並使其可供下載。您只需提供文件內容即可從 JavaScript 前端啟動下載，其餘的留給插件。
HTML
我們將從創建一個帶有文本區域和下載按鈕的簡單 HTML 頁面開始，這樣我們就可以演示該插件的工作情況。
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Generating files with JS & PHP | Tutorialzine Demo</title>
<!-- Our CSS stylesheet file -->
<link rel="stylesheet" href="assets/css/styles.css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Generating Files with JavaScript</h1>
<h2><a href="https://tutorialzine.com/2011/05/generating-files-javascript-php/">« Read and download on Tutorialzine</a></h2>
</header>
<form action="./" method="post">
<textarea></textarea>
<a href="#" class="blueButton" id="download">Download</a>
</form>
<footer>Another cool example: <a href="#" id="downloadPage">download this page.</a> <b>To download the source code, visit <a href="https://tutorialzine.com/2011/05/generating-files-javascript-php/">Tutorialzine.com</a></b></footer>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script src="assets/js/jquery.generateFile.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html> 該頁面使用 HTML5 文檔類型，因為我們使用的是標准定義的一些標籤。為了讓它在 IE 中運行，我們還需要在 head 部分包含 HTML5 啟用腳本。
在結束 body 標記之前，我們添加了 jQuery 庫，generateFile 插件 我們稍後會寫，script.js 監聽事件並觸發文件下載的文件。
PHP
您可能知道，僅使用 JavaScript 無法生成文件。存在不同的解決方案（其中一些甚至依賴於 Flash），但在後端使用通用 PHP 腳本可以提供更好的控制和易用性（更不用說它適用於所有主流瀏覽器）。
您可以在下面看到通用文件生成腳本：
下載.php
if(empty($_POST['filename']) || empty($_POST['content'])){
exit;
}
// Sanitizing the filename:
$filename = preg_replace('/[^a-z0-9\-\_\.]/i','',$_POST['filename']);
// Outputting headers:
header("Cache-Control: ");
header("Content-type: text/plain");
header('Content-Disposition: attachment; filename="'.$filename.'"');
echo $_POST['content']; 這個 PHP 腳本所做的只是在 echo 語句的頂部添加一些標題。我們正在構建的插件必須與 POST 請求一起傳遞兩個參數：filename 和內容 .該腳本將打印文件的內容，同時設置三個標題以強制顯示文件下載框（而不是您的瀏覽器簡單地打開它）。
要使用該插件，您需要將此文件上傳到服務器上的某個位置，並將其 URL 傳遞給我們接下來將編碼的插件。
jQuery
正如您在上一節中看到的，我們的插件必須向 download.php 發出 POST 請求 .發出請求的自然選擇是使用 AJAX。但是，使用這種方法有一個缺點——它不會觸發文件下載對話框的出現。
所以我們需要的是更老的學校。我們將動態創建一個隱藏的 iframe 並向其中寫入一個表單，稍後我們將通過 POST 提交該表單。表單的action屬性指向download.php ，所以文件下載對話框會彈出，完全符合我們的需要。
現在讓我們編寫執行此操作的 jQuery 代碼：
assets/jquery.generateFile.js
(function($){
// Creating a jQuery plugin:
$.generateFile = function(options){
options = options || {};
if(!options.script || !options.filename || !options.content){
throw new Error("Please enter all the required config options!");
}
// Creating a 1 by 1 px invisible iframe:
var iframe = $('<iframe>',{
width:1,
height:1,
frameborder:0,
css:{
display:'none'
}
}).appendTo('body');
var formHTML = '<form action="" method="post">'+
'<input type="hidden" name="filename" />'+
'<input type="hidden" name="content" />'+
'</form>';
// Giving IE a chance to build the DOM in
// the iframe with a short timeout:
setTimeout(function(){
// The body element of the iframe document:
var body = (iframe.prop('contentDocument') !== undefined) ?
iframe.prop('contentDocument').body :
iframe.prop('document').body; // IE
body = $(body);
// Adding the form to the body:
body.html(formHTML);
var form = body.find('form');
form.attr('action',options.script);
form.find('input[name=filename]').val(options.filename);
form.find('input[name=content]').val(options.content);
// Submitting the form to download.php. This will
// cause the file download dialog box to appear.
form.submit();
},50);
};
})(jQuery); 在不到 50 行（去掉註釋）中，上面的片段就完成了我們需要的工作。它會創建一個隱藏的 iframe，其中包含一個表單。
注意 setTimeout() 功能。沒有它，我們將無法在 Internet Explorer 中訪問 iframe 的文檔元素。這樣一來，我們就可以給它時間來構建 DOM 並使其可供我們使用。
下面是如何使用這個插件：
資產/script.js
$(document).ready(function(){
$('#download').click(function(e){
$.generateFile({
filename : 'export.txt',
content : $('textarea').val(),
script : 'download.php'
});
e.preventDefault();
});
$('#downloadPage').click(function(e){
$.generateFile({
filename : 'page.html',
content : $('html').html(),
script : 'download.php'
});
e.preventDefault();
});
});
調用 $.generateFile 時 ，您需要傳遞文件的名稱（應該是描述性的）、它的文本內容以及 download.php 的路徑。如上例所示，我們可以生成任何類型的文件，只要是文本即可。
這樣我們的簡單插件就完成了！
結論
您可以使用此代碼向您的 Web 應用程序添加導出功能，或使用下載功能增強您網站的某些區域。如果您遵循 Microsoft Office 的 XML 格式，甚至可以生成 doc 文件和電子表格。最好的部分是一切都使用 JavaScript 完成，您可以輕鬆組合不同的數據源。
