1. 程式人生 > >Js -----後臺json數據,前端生成下載text文件

Js -----後臺json數據,前端生成下載text文件

isp console 導入失敗 string ech eat 文件 alert 不支持

需要引入

<script src="/assets/libs/single_file/jquery.min.js"></script>
<script src="/assets/libs/layer/layer.js"></script>

借鑒 張鑫旭文章

http://www.zhangxinxu.com/wordpress/2017/07/js-text-string-download-as-html-json-file/

 1  // 返回錯誤信息彈框顯示
 2     @if (session(‘point_errors‘))
 3         var point_errors = JSON.stringify({!! session()->pull(‘point_errors‘) !!});
4 point_errors = JSON.parse( point_errors ); 5 // console.log(point_errors); 6 var text_content = ‘‘,msg = ‘‘,layer_content = ‘<p><input type="button" id="download_text" value="點擊下載文件"></p>‘; 7 $.each(point_errors, function(index, item) { 8 //
組織text內容 9 text_content += item[0] + ‘ ‘ + item[1] + ‘ ----‘ 10 + item[2] + ‘\r\n‘; 11 12 msg = ‘<p style="padding:0;margin:0">‘+item[1] + ‘[‘ 13 + item[0] + ‘]----‘ 14 + item[2] + ‘</p>‘; 15 layer_content += msg;
16 }); 17 18 console.log(layer_content); 19 console.log(text_content); 20 21 // 下載文件方法 22 var funDownload = function (content, filename) { 23 var eleLink = document.createElement(‘a‘); 24 eleLink.download = filename; 25 eleLink.style.display = ‘none‘; 26 // 字符內容轉變成blob地址 27 var blob = new Blob([content]); 28 eleLink.href = URL.createObjectURL(blob); 29 // 觸發點擊 30 document.body.appendChild(eleLink); 31 eleLink.click(); 32 // 然後移除 33 document.body.removeChild(eleLink); 34 }; 35 36 if (‘download‘ in document.createElement(‘a‘)) { 37 // 作為test.html文件下載 38 $(document).on(‘click‘, ‘#download_text‘, function () { 39 funDownload(text_content, ‘導入失敗的用戶信息.text‘); 40 }); 41 } else { 42 $(document).on(‘click‘, ‘#download_text‘, function () { 43 alert(‘瀏覽器不支持‘); 44 }); 45 } 46 47 setTimeout(function(){ 48 layer.open({ 49 type: 1, 50 area: [‘500px‘, ‘600px‘], 51 content: layer_content, 52 scrollbar: true 53 }); 54 }, 2000); 55 @endif

技術分享

Js -----後臺json數據,前端生成下載text文件