Tag Archive ไฟล์

Fetch API: Download

ที่นี้มาถึงการที่ใช้ fetch download file จาก server ซึ่งวิธีนี้ง่ายกว่าการใช้ jQuery ดึงไฟล์มามาก จากที่เคยเขียน jQuery ajax download file เอาไว้จะเห็นว่าวิธีนี้ง่ายกว่ามาก

เริ่มจากการที่โหลด download.js มาก่อน โดยใช้คำสั่ง npm i downloadjs
ไฟล์กลางที่ไว้ใช้ร่วมกัน

scripts.js

/*
pitt phunsanit
default fetch api options
version 1
*/
let fetchOptions = {
    "headers": {
        'Content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
    },
    "method": "post"
};

/*
pitt phunsanit
get file name from fetch api
version 1
*/
function fetchGetFilename(response) {
    let filename = '';
    let disposition = response.headers.get('Content-Disposition');
    if (disposition && disposition.indexOf('attachment') !== -1) {
        let filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
        let matches = filenameRegex.exec(disposition);
        if (matches != null && matches[1]) {
            filename = matches[1].replace(/['"]/g, '');
        }
    }
    return filename;
}

/*
pitt phunsanit
get status from fetch api
version 1
*/
function fetchStatus(Response) {
    if (Response.status >= 200 && Response.status < 300) {
        return Promise.resolve(Response);
    } else {
        return Promise.reject(new Error(Response.status + ' : ' + Response.statusText));
    }
}

ตัวอย่างการใช้ fetch download file โดยใช้ downloadjs ช่วยให้ทำงานได้ทุกบราวเซอร์ (ยกเว้น IE ถ้าจะใช้กลับไปอ่าน Fetch API)

JavaScript/fetch.download.html
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

      <meta name="author" content="Pitt Phunsanit">
      <title>fetch: download</title>
   </head>
   <body>
      <script src="../node_modules/downloadjs/download.min.js"></script>
      <script src="../scripts.js"></script>
      <script>
fetchOptions.body = 'file=ISO 3166-1 two aplha COUNTRY codes (01102009).xls&token=HH89VOiirgXlCdEqDrFs';

fetch('http://localhost/snippets/PHP/download.php', fetchOptions)
    .then(fetchStatus)
    .then(
        function(response) {
            if (response.ok) {
                let fileName = fetchGetFilename(response);
                let mimeType = response.headers.get('Content-Type');

                response.blob().then(function(blob) {
                    download(blob, fileName, mimeType);
                });
            }
        }
    )
    .catch(function(error) {
        alert(error);
    });
      </script>

</body></html>

อ่านเพิ่มเติม

curl: ดาวน์โหลดไฟล์

การใช้ curl ไป download file จากเซิร์ฟเวอร์อื่นๆ ไม่ได้ซับซ้อนเหมือนการอัพโหลดในตัวอย่าง curl: ส่งไฟล์ การทำงานค่อนข้างตรงไปตรงมาก คือ มีไฟล์ที่มี code curl ทำหน้าที่ request และมีไฟล์หรือโปรแกรมที่ทำหน้าที่จ่ายไฟล์ให้ โดยดัดแปลงให้แสดง error กลับมาในรูปแบบที่ง่ายกับการแสดง error ในฝั่งรีเควสท์

เพื่อความปลอดภัย จะมีการเขียนการตรวจสอบเล็กน้อย

  • จะส่ง token มาและทั้ง 2 ไฟล์จะต้องมีค่าเท่าๆกัน ในความเป็นจริง ควรจะมีการเขียนที่ดีกว่านี้ เช่น เปลี่ยน token ตามช่วงเวลา
  • ไม่ควรให้ร้องขอไฟล์โดยใช้ full path และเพื่อป้องกันการใช้ฝั่งรับในการ download ไฟล์อื่นๆ จึงต้องกำหนดโฟลเดอร์เริ่มต้นไว้ให้ดาวน์โหลดไฟล์ในโฟลเดอร์ที่กำหนดไว้เท่านั้น
  • <?php
    header('Cache-Control: no-cache, no-store, must-revalidate');
    header('Expires: 0');
    header('Pragma: no-cache');
    
    $post = [
        'file' => 'test.docx',
        'token' => $token,
    ];
    $token = 'HH89VOiirgXlCdEqDrFs';
    $url = 'http://localhost/snippets/PHP/download.php';
    
    $ch = curl_init();
    
    curl_setopt_array($ch, [
        CURLOPT_ENCODING => 'UTF-8',
        CURLOPT_FRESH_CONNECT => true,
        CURLOPT_POST => 1,
        CURLOPT_POSTFIELDS => http_build_query($post),
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_URL => $url,
    ]);
    
    $result = curl_exec($ch);
    
    switch ($result) {
        case 'bad token':{
                curl_close($ch);
                exit('check token in ' . $url);
            }break;
    
        case 'file not found':{
                curl_close($ch);
                exit('file not found in target server.');
            }break;
    
        default:{
                header('Content-Disposition: attachment; filename="' . $post['file']);
                echo $result;
            }
    }
    curl_close($ch);

    <?php
    $fileDir = '../assets/';
    $token = 'HH89VOiirgXlCdEqDrFs';
    
    if ($_REQUEST['token'] != $token) {
        exit('bad token');
    }
    
    $file = $fileDir . $_REQUEST['file'];
    if (file_exists($file)) {
        header('Content-Description: File Transfer');
        header('Content-Type: ' . mime_content_type($file));
        header('Content-Disposition: attachment; filename="' . basename($file) . '"');
        header('Expires: 0');
        header('Cache-Control: must-revalidate');
        header('Pragma: public');
        header('Content-Length: ' . filesize($file));
    
        //readfile($file);
        echo file_get_contents($file);
    } else {
        exit('file not found');
    }
    

curl: ส่งไฟล์

และแล้วก็มาถึงจุดที่รอคอย การส่งไฟล์ด้วย curl เหมือนที่ user upload ไฟล์เข้าเว็บ เหมาะกับการเอาไปเขียนโปรแกรมทรานสเฟอร์ไฟล์จากเว็บหนึ่งไปอีกที่หนึ่ง หรือจะเขียน bot ส่งไฟล์ออกไปเก็บเป็นข้อมูลสำรองก็ได้

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>CURL: send file</title>
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
    <div class="container">
        <?php
if (count($_FILES) || count($_POST)) {
    $url = 'http://localhost/snippets/PHP/variables.php';

    if (count($_FILES)) {
        $file_name_with_full_path = $_FILES['avatar']['tmp_name'];

        if (function_exists('curl_file_create')) {
            /* php 5.5+ */
            $_POST['avatar'] = curl_file_create($file_name_with_full_path);
        } else {
            $_POST['avatar'] = '@' . realpath($file_name_with_full_path);
        }
    }

    $ch = curl_init();

    curl_setopt_array($ch, [
        CURLOPT_ENCODING => 'UTF-8',
        CURLOPT_POST => 1,
        CURLOPT_POSTFIELDS => $_POST,
        //CURLOPT_POSTFIELDS => http_build_query($_POST),
        CURLOPT_RETURNTRANSFER => true,
        CURLOPT_URL => $url,
    ]);

    $result = curl_exec($ch);
    curl_close($ch);

    echo $result;
}
?>
            <form action="curl_file.php" enctype="multipart/form-data" method="post">
                <div class="form-group">
                    <label for="name">Name:</label>
                    <input class="form-control" id="name" name="name" type="text">
                </div>
                <div class="form-group">
                    <label for="avatar">Avatar:</label>
                    <input accept="image/gif, image/jpeg, image/x-png" class="form-control" id="avatar" name="avatar" type="file">
                </div>
                <div class="form-group">
                    <label for="address1">text address:</label>
                    <input class="form-control" id="address1" name="address[d]" type="text">
                </div>
                <div class="form-group">
                    <label for="address2">text address 2:</label>
                    <input class="form-control" id="address2" name="address[f]" type="text">
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
    </div>
</body>

</html>

แต่เพราะ bug ของ function http_build_query ไม่สามารถ encoded query string ในกรณีที่มีไฟล์ได้อย่างถูกต้อง ทำให้ต้องส่งค่าฟอร์มไปโดยไม่เข้ารหัส ดังนั้น ค่าที่เป็น array จึงส่งค่าออกไปผิด

[address]Array
(
    [name] => pitt phunsanit
    [address] => Array
)

จากที่ค้นหาข้อมูลดู ยังไม่มีวิธีที่แก้ปัญหานี้ได้โดยไม่มีผลอาการข้างเคียง คงต้องรอให้ทางทีมงานพัฒนา PHP แก้ปัญหาให้ ตอนนี้ก็พยามหลีกเลี่ยงการส่งข้อมูลแบบเป็นอาร์เรไปก่อน อาจจะใช้ implode รวมข้อมูลก่อนส่งไปก็ได้

PHP: no-cache css javascript

ตามคำแนะนำในการทำเว็บให้เร็วคือให้แยกไฟล์ภาพ, css และ javascript ออกมาเพราะว่าไฟล์พวกนี้แทบจะเหมือนๆ กันทุกๆหน้า และเปลี่ยนไม่บ่อยนัก การ set server จึงกำหนดให้ทางฝั่ง browser จดจำ static content (css, images,js files) พวกนี้เอาไว้ จะได้ไม่ต้องโหลดไฟล์พวกนี้ใหม่ ทำให้สิ้นเปลือง (สิ้นเปลือง bandwide แบนด์วิธอันล้ำค่าและมีราคาที่เช่ามาจาก isp และ cpu, ram ที่ใช่จัดการจ่ายไฟล์จาก server ไปให้บราวน์เซอร์ของยูเซอร์)

ปัญหาก็คือ เมื่อเราแก้ไฟล์ image, css หรือ javascript อัพโหลดขึ้นไปบน server แล้วแต่ user ยังได้รับไฟล์ version เดิมๆ อยู่ ที่นิยมกันก็คือ ใส่ตัวแปรแบบสุ่มหรือเวลาตามหลังชื่อไฟล์ เช่น

<link href="styles.css?ts=150151" rel="stylesheet" type="text/css">
...
<script src="scripts.js?ts=150151">
...
<img src="logo.png?ts=150151">

เมื่อต้องการให้ใช้ไฟล์ version ใหม่ก็เปลี่ยนค่าของ ts เป็นค่าอื่น ตัว browser จะถือว่าเป็นคนละไฟล์กับไฟล์เดิมที่เก็บไว้ใน cache ของมันเอง ปัญหาก็คือถ้ามีไฟล์พวกนี้ 100 จุด หรือ 1000 จุดก็ต้องไล่แก้ทั้งหมดให้เหมือนๆกันถึงจะเปลี่ยนไฟล์ทุกตัวให้เป็นตัวใหม่พร้อมๆกัน อาจจะทำเป็น global variable หรือใช้ function จัดการให้แต่มันซับซ้อนเกินไป

อีกวิธีที่ทำได้ง่ายแต่ได้ผลกับทุกๆ ไฟล์คือใช้

header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');

เมื่อต้องการให้ browser โหลดไฟล์ใหม่อีกครั้ง โดยใส่ใน header ของเว็บ

อ่านเพิ่มเติม HTTP Caching

jQuery: upload แบบ ajax

ตัวอย่างการใช้ jQuery upload ไฟล์แบบ ajax

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>jQuery: form > send file</title>
    <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <style>
        .progressbar {
            background: #c00000;
            clear: both;
            height: 10px;
            width: 0;
        }

        .progressLoaded {
            width: 50px;
        }

        .progressLoaded::after {
            content: " bytes";
        }

        .progressPercent {
            width: 50px;
        }

        .progressPercent::after {
            content: " %";
        }

        .progressTotal {
            float: left;
            width: 50px;
        }

        .progressTotal::after {
            content: " bytes";
        }

        .progressTotal::before {
            content: " of ";
        }
    </style>
</head>

<body>
    <h1>upload file with ajax</h1>
    <form action="values.php" class="form-horizontal" enctype="multipart/form-data" id="formA" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
            <div class="col-sm-10">
                <input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label" for="photoI">ภาพถ่าย</label>
            <div class="col-sm-10">
                <input class="form-control" id="photoI" name="photo" placeholder="upload file" type="file">
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-10 text-right">
                <button type="submit" class="btn btn-success">ส่งข้อมูล</button>
            </div>
        </div>
    </form>
    <div class="col-sm-12">
        <h4>Progress</h4>
        <div class="progressLoaded"></div>
        <div class="progressTotal"></div>
        <div class="progressPercent"></div>
        <div class="progressbar"></div>
    </div>
    <div class="col-sm-12" id="resultA"></div>
    <script src="../vendor/components/jquery/jquery.min.js"></script>
    <script>
        function xhrProgress(xhr) {
            if (xhr.upload) {
                // For handling the progress of the upload
                xhr.upload.addEventListener('progress', function (e) {
                    if (e.lengthComputable) {
                        $('.progressTotal').html(e.total);
                        $('.progressLoaded').html(e.loaded);

                        percentComplete = parseInt((e.loaded / e.total * 100), 10);
                        $('.progressPercent').html(percentComplete);
                        $('.progressbar').css("width", percentComplete + '%');
                    }
                }, false);
            }
            return xhr;
        }

        $(function () {

            var formA = $('#formA');

            formA.submit(function (event) {
                event.preventDefault();

                $.ajax({
                    "beforeSend": function (jqXHR, settings) {
                        /* แยกตัวแปรไว้ตรวจสอบข้อมูล */
                        var params = settings.data;

                        if (settings.data.get('socialid') == '') {

                            jqXHR.abort();
                            alert('กรุณากรอกหมายเลขบัตรประชาชน');

                            return false;
                        }

                        if (settings.data.get('photo').name == '') {

                            jqXHR.abort();
                            alert('กรุณาอัพโหลดรูปภาพ');

                            return false;
                        }

                    },
                    "contentType": false,
                    "data": new FormData(formA[0]),
                    "method": "POST",
                    "processData": false,
                    "success": function (data, textStatus, jqXHR) {
                        $('#resultA').html(data);
                    },
                    "url": "values.php",
                    "xhr": function () {
                        return xhrProgress($.ajaxSettings.xhr());
                    },

                });

            });

        });
    </script>
</body>

</html>

ไฟล์ที่รอรับข้อมูล

<?php
echo 'FILE<pre>', print_r($_FILES, true), '</pre>';
echo 'GET<pre>', print_r($_GET, true), '</pre>';
echo 'POST<pre>', print_r($_POST, true), '</pre>';

วิธีนี้ใช้ความสามารถใหม่ FormData ที่ใช้กับ browser เก่าแก่กว่า Internet Explorer 10 หรือ Edge ไม่ได้ ดูเพิ่มเติม

PHP: upload ไฟล์ขนาดใหญ่

การอัพโหลดไฟล์ขนาดใหญ่เกินกว่าที่อนุญาตไว้ใน php.ini สามารถแก้ได้หลายวิธี

  • กำหนดใหม่เฉพาะที่ใช้

    เพิ่ม code เข้าไปก่อนที่จะดำเนินการกับไฟล์ขนาดใหญ่เป็นพิเศษ วิธีนี้จะมีผลแค่ในส่วนที่เรากำหนดเท่านั้นเป็นวิธีที่ปลอดภัยที่สุด

    <?php
    ini_set('max_execution_time', '300');
    ini_set('post_max_size', '64M');
    ini_set('upload_max_size', '64M');
  • ใช้ไฟล์ .htaccess

    ใช้ได้กับเซิฟเวอร์ที่ใช้ apache เท่านั้น กำหนดโดยใส่ไว้ในไฟล์นามสกุล .htaccess

    RewriteEngine On
    
    # if not root directory
    #RewriteBase /
    
    # upload larage file
    php_value max_execution_time 300
    php_value max_input_time 300
    php_value post_max_size 64M
    php_value upload_max_filesize 64M
  • กำหนดใน php.ini

    จะมีผลกับทุกๆส่วนในเซิฟเวอร์ เพราะฉะนั้น ถ้าไม่ใช่ server ของตัวเองหรือเป็น private server แล้วอาจจะไม่สามารถใช้วิธีนี้ เพราะผู้ดูแลระบบมักจะไม่ให้แก้ไขในส่วนนี้ ยกเว้นในบาง server เช่น fatcow ยอมให้แก้ไขค่าตั้งต้นได้ แต่เซิฟเวอร์ไทยไม่เคยเจอที่ไหนยอมให้แก้ไข

    max_execution_time = 300
    post_max_size = 64M
    upload_max_filesize = 64M

การทดสอบดูว่าสามารถกำหนดค่าใหม่ได้จริงๆ รึเปล่าทำได้โดยเรียกใช้ function phpinfo() ค่าที่เปลี่ยนจะอยู่ใน column Local Value แถว max_execution_time, post_max_size, และ upload_max_filesize

PHP: ดูการทำงานสร้าง flowchart (backtrace)

ถ้าเรียนเขียน program มาคงจะคุ้นเคยกับ flowchart การทำงานของของโปรแกรม แต่ในชีวิตการทำงานจริงๆ โดยเฉพาะถ้าเขียน code โดยใช้ framework ต่างๆ จะไม่เป็นเหมือนที่ได้ออกแบบไว้เสมอไป เพราะว่าบางครั้งโปรแกรมจะทำงานให้เราเองโดยที่ไม่ได้สั่ง สาเหตุคือ มีการเรียกใช้ hook หรือ tricker ทำให้เกิด process ที่อาจจะไม่ทราบที่มา หรือต้องมาแก้งานของคนอื่นโดนที่ไม่มีเอกสารให้

นอกจากการใช้วิธี PHP: list included หรือ required ไฟล์ที่ใช้ ถ้าเราใช้ตัว framework ต่างๆ มักจะมีการเตรียม function ในการสร้าง backtrace ไว้ให้ แต่ถ้าไม่มีหรือเป็น code ที่เขียนด้วยตัวเอง ยังสามารถใช้ debug_backtrace ในการค้นหาที่มาที่ไปได้เช่น

<?php

function getBacktrace()
{
    $backtrace = debug_backtrace();
    echo '<pre>', print_r($backtrace, true), '</pre>';
    fwrite(fopen('logs_debug_backtrace.txt', 'a+'), "\n\n" . __FILE__ . ' :' . __LINE__ . "\n\n" . print_r($backtrace, true));
}

function getPhpInfo($what)
{
    phpinfo($what);

    /* จะดูว่า ทำไม่ getPhpInfo ถึงทำงาน */
    getBacktrace();
}

function index()
{
    getPhpInfo(INFO_ENVIRONMENT);
}

index();

เมื่อทดสอบดูจะได้ผลลัพธ์

Array
(
    [0] => Array
        (
            [file] => D:\xampp\htdocs\snippets\PHP\debug.debug_backtrace.php
            [line] => 13
            [function] => getBacktrace
            [args] => Array
                (
                )

        )

    [1] => Array
        (
            [file] => D:\xampp\htdocs\snippets\PHP\debug.debug_backtrace.php
            [line] => 18
            [function] => getPhpInfo
            [args] => Array
                (
                    [0] => 16
                )

        )

    [2] => Array
        (
            [file] => D:\xampp\htdocs\snippets\PHP\debug.debug_backtrace.php
            [line] => 21
            [function] => index
            [args] => Array
                (
                )

        )

)

เพราะว่าเราเขียน function debug_backtrace() ไว้ใน function getBacktrace() อีกชั้น เพื่อที่ความง่ายในการค้นหา flow เมื่อต้องการดูว่า function หรือ class ที่เราสนใจมันมี flow มายังไงก็แค่ไปเรียกใน function ที่สงสัย เราก็จะได้ลำดับการทำงานย้อนกลับไป เราจะได้ทราบทั้งฟังก์ชั้น คลาส บรรทัด ไฟล์ แม้แต่ตัวแปรที่ส่งเข้าไปใน function นั้นๆ

PHP: list included หรือ required ไฟล์ที่ใช้

การเขียนโปรแกรมโดยใช้ php นิยมจะแยกไฟล์ออกเป็นส่วนๆ เพื่อความสะดวกในการเขียนและ reused ไฟล์เพื่อที่จะนำมาใช้ซ้ำอีกครั้ง เช่น ในเว็บทั่วไปมันจะมีส่วนของ header และ footer เหมือนกันทุกๆหน้า แทนนี้จะเขียนส่วนหัวและส่วนท้ายทุกครั้ง สำหรับทุกหน้าเพื่อแสดงผลเหมือนๆ กันก็จะนิยมสร้างเป็นไฟล์ แยกออกไป จากนั้นก็แทรกเข้ามาโดยใช้ function included หรือ required

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title><?php echo $title; ?></title>
</head>
<body>

และ

</body>
</html>

ถ้าหากต้องมีการเปลี่ยน design ก็สามารถแก้ได้โดยแก้ใน 2 ไฟล์นี้เท่านั้นแทนที่จะต้องไปไล่เปลี่ยนในทุกๆไฟล์ (มีแค่ 100 หน้าก็เหนื่อยแล้ว)

แต่เมื่อโครงสร้างไฟล์ใน project เริ่มมีความซับซ้อน เช่น ไม่ทราบว่าไฟล์ที่เราใช้คำสั่ง included หรือ required นั้นมีไฟล์ไหนบ้าง เพราะว่าไฟล์ที่ include เข้ามาสามารถแทรกไฟล์ส่วนอื่นๆ เข้ามาเพิ่มได้เหมือนกันเช่น header.php อาจจะมีการแทรกไฟล์ menu.php เพื่อแสดงส่วนของเมนู ภาษาพีเฮชพีจึงได้เตรียม function get_included_files เข้ามาช่วย debug ไฟล์ทั้งหมดที่แทรกเอาเข้ามา

ตัวอย่างการใช้งาน

<?php
$title = 'names of included or required files';
include 'header.php';

function getIncludedFiles()
{
    $files = get_included_files();
    echo '<pre>', print_r($files, true), '</pre>';
    fwrite(fopen('logs_get_included_files.txt', 'a+'), "\n\n" . __FILE__ . ' :' . __LINE__ . "\n\n" . print_r($files, true));

}

getIncludedFiles();

include 'footer.php';

ทดลองเรียกดู จะเห็นว่าจะแสดงเป็น array

Array
(
    [0] => D:\xampp\htdocs\snippets\PHP\get_included_files.php
    [1] => D:\xampp\htdocs\snippets\PHP\header.php
)

สังเกตดูจะเป็นว่าจะแสดง array ออกมาและเขียนไฟล์ logs_get_included_files.txt เพิ่มขึ้นมา โดยเริ่มจากไฟล์ debug.get_included_files.php เองและแสดงไฟล์ header.php ที่แทรกเข้ามา แต่กลับไม่แสดง footer.php เพราะว่าแทรกเข้ามาหลัง function get_included_files() ในการใช้งานจริงๆ จึงควรแทรกไว้ที่ลำดับการทำงานสุดท้ายเช่นไฟล์ footer.php จึงจะสามารถ list ไฟล์ที่ใช้ได้ครบ

นอกจากนี้ยังสามารถเขียนให้จบในบรรทัดเดียวได้

fwrite(fopen('get_included_files.txt', 'a+'), print_r(get_included_files(), true));

jQuery ajax download file

มีวิธีที่ง่ายกว่า Fetch API: Download

งานที่ทำอยู่วันนี้ ต้องส่งข้อมูลไปให้อีกไฟล์เพื่อสร้างไฟล์ excel ให้ดาวน์โหลด แต่เพราะว่าจำเป็นต้องส่งรายการ ที่เลือกไปให้ด้วย บางครั้งมันยาวเกินกว่าที่จะส่งไปแบบ GET ทำให้ต้องส่งแบบ post และไม่อยากจะใช้วิธี submit form ไปอีกหน้าเพราะว่าหน้านี้เป็นแบบใช้ ajax ทั้งหมด ปัญหาคือ jquery ajax มันไม่รองรับการ download file จริงๆ ถ้าจะทำก็ทำได้ แต่เขียนยุ่งยากมาก แต่ก็มีคนเขียน jquery.fileDownload ทำให้ทำได้ง่ายๆมากๆ แค่ใส่ url ไปแค่นั้นเอง

<!doctype html>
<html>
   <head>
      <meta charset="utf-8">
      <title>jquery.fileDownload</title>
      <link href="vendor/components/jqueryui/themes/base/jquery-ui.min.css" rel="stylesheet" type="text/css" />
   </head>
   <body>
      <button id="downloadBtn" type="button">Download with dialog</button>
      <hr>
      <button id="downloadBtn1" type="button">Download without dialog</button>
      <hr>
      <form action="PHPExcel_writer_styles_border.php" id="formA" method="post">
         <label>Search :
         <input name="search" type="text"></label>
         <button type="submit">Download with form</button>
      </form>
      <script src="vendor/components/jquery/jquery.min.js"></script>
      <script src="vendor/components/jqueryui/jquery-ui.min.js"></script>
      <script src="vendor/johnculviner/jquery.fileDownload/src/Scripts/jquery.fileDownload.js"></script>
      <script>
         $(function() {

             $('#downloadBtn').click(function(event) {
                 event.preventDefault();

                  $.fileDownload('PHPExcel_writer_styles_border.php', {
                     failMessageHtml: "There was a problem generating your report, please try again.",
                     preparingMessageHtml: "We are preparing your report, please wait...",
                 });

             });

             $('#downloadBtn1').click(function(event) {
                 event.preventDefault();

                  $.fileDownload('PHPExcel_writer_styles_border.php');

             });

             $('#formA').submit(function(event) {
                 event.preventDefault();

                 $.fileDownload($(this).prop('action'), {
                     data: $(this).serialize(),
                     failMessageHtml: "There was a problem generating your report, please try again.",
                     httpMethod: "POST",
                     preparingMessageHtml: "We are preparing your report, please wait...",
                 });

             });

         });
      </script>
   </body>
</html>

PHPExcel: ใส่ภาพในไฟล์

บางครั้งการ export ข้อมูลออกไปเป็นไฟล์ excel ก็ต้องการใส่ภาพลงไปด้วย อาจจะเป็นโลโก้บริษัท หรือว่าเป็นภาพตัวอย่างสินค้า PHPExcel สามารถแทรกภาพได้ทั้งจาก file หรือ url ของภาพที่ออนไลน์อยู่

<?php

include 'vendor/phpoffice/phpexcel/Classes/PHPExcel.php';

$objPHPExcel = new PHPExcel();

/* Set default style */
$defaultStyle = $objPHPExcel->getDefaultStyle();

$defaultStyle->getFont()
    ->setName('Arial')
    ->setSize(11);

/* Set document properties */
$title = 'Exports_Datas_' . date('Y-m-d_H:i');
$objPHPExcel->getProperties()->setCreator('Pitt Phunsanit')
    ->setCategory('Exports Datas')
    ->setDescription($title)
    ->setKeywords('Exports Datas ' . date('Y-m-d'))
    ->setSubject($title)
    ->setTitle($title);

/* rename sheet */
$objWorkSheet = $objPHPExcel->getActiveSheet();
$objWorkSheet->setTitle('Exports Datas');

/* image path */
$images = [
    'https://raw.githubusercontent.com/PHPOffice/PHPExcel/1.8/Examples/images/officelogo.jpg',
    'https://raw.githubusercontent.com/PHPOffice/PHPExcel/1.8/Examples/images/paid.png',
    'https://raw.githubusercontent.com/PHPOffice/PHPExcel/1.8/Examples/images/phpexcel_logo.gif',
    'https://raw.githubusercontent.com/PHPOffice/PHPExcel/1.8/Examples/images/termsconditions.jpg',
    'vendor/phpoffice/phpexcel/Examples/images/officelogo.jpg',
    'vendor/phpoffice/phpexcel/Examples/images/paid.png',
    'vendor/phpoffice/phpexcel/Examples/images/phpexcel_logo.gif',
    'vendor/phpoffice/phpexcel/Examples/images/termsconditions.jpg',
];

$rowNo = 0;
foreach ($images as $image) {
    $rowNo++;

    $coordinate = 'A' . $rowNo;

    $objWorkSheet->getRowDimension($rowNo)->setRowHeight(90);
    $objWorkSheet->setCellValue($coordinate, $image);

    switch (strtolower(pathinfo($image, PATHINFO_EXTENSION))) {
        case 'gif':
            $gdImage = imagecreatefromgif($image);
            $mimetype = PHPExcel_Worksheet_MemoryDrawing::MIMETYPE_GIF;
            $render = PHPExcel_Worksheet_MemoryDrawing::RENDERING_GIF;
            break;

        case 'jpeg':
        case 'jpg':
            $gdImage = imagecreatefromjpeg($image);
            $mimetype = PHPExcel_Worksheet_MemoryDrawing::MIMETYPE_JPEG;
            $render = PHPExcel_Worksheet_MemoryDrawing::RENDERING_JPEG;
            break;

        case 'png':
            $gdImage = imagecreatefrompng($image);
            $mimetype = PHPExcel_Worksheet_MemoryDrawing::MIMETYPE_PNG;
            $render = PHPExcel_Worksheet_MemoryDrawing::RENDERING_PNG;
            break;
    }

    $objDrawing = new PHPExcel_Worksheet_MemoryDrawing();

    $objDrawing->setCoordinates($coordinate);
    $objDrawing->setImageResource($gdImage);
    $objDrawing->setWorksheet($objWorkSheet);

    /* optional */
    $objDrawing->setDescription($image);
    $objDrawing->setMimeType($mimetype);
    $objDrawing->setName(pathinfo($image, PATHINFO_FILENAME));
    $objDrawing->setRenderingFunction($render);
    $objDrawing->setResizeProportional(true);
    $objDrawing->setWidth(100);

}

$objWorkSheet->getColumnDimension('A')->setAutoSize(true);

/* write */
$objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007');
header('Content-Type: application/vnd.ms-excel');
header('Content-Disposition: attachment;filename="' . $title . '.xlsx"');
header('Cache-Control: max-age=0');
header('Cache-Control: no-store, no-cache, must-revalidate, max-age=0');
header('Cache-Control: post-check=0, pre-check=0', false);
header('Pragma: no-cache');
$objWriter->save('php://output');

อธิบาย

setCoordinates
ตำแหน่งที่ให้ภาพไปลอยอยู่
setDescription
รายละเอียด (optional)
setName
ชื่อภาพ (optional)
setResizeProportional
รักษาสัดส่วนของภาพเอาไว้
setWorksheet
อ้างถึง Active Sheet หรือ sheet ที่ใส่ข้อมูล
ถ้าเลือกใช้ PHPExcel_IOFactory::createWriter ผิด version เช่น ‘Excel5’ อาจจะทำให้ภาพมีสัดส่วนเพี้ยนได้