3 dấu bằng (===) trong Javscript

3 dấu bằng được dùng để so sánh giá trị lẫn kiểu dữ liệu trong Javascript,

<html>
<head></head>
<body>
    <script type="text/javascript">
        var a=1; // Numeric Value
        var b=1; // Numeric Value
        var c="1"; // String Value
        var d="1"; //String Value
        alert(a===b); // Alerts 'true' as both variables are numeric,having value 1
        alert(c===d); // Alerts 'true' as both variables are string,having value 1
        alert(b===c); // Alerts 'false'as both variables are different type,having value 1
    </script>
</body>
</html>

 

Chuyển html pages thành file PDF

Để chuyển 1 trang Html thành file pdf, có khá nhiều thư viện miễn phí lẫn có phí như iTextSharp, WkHtmlToPdf, Prince,Pechkin(.NET Wrapper for WkHtmlToPdf static DLL), TuesPechkin... Tôi đã thử qua 1 số thư viện và nhận thấy:

  • iTextSharp: hỗ trợ html không tốt, hay gặp lỗi khi sử dụng thẻ <ul>, </html> (hay code của mình viết thiếu gì nhỉ :D).
  • WkHtmlToPdf: xuất file pdf từ html rất tốt nhưng có vấn đề nếu dự án là website
  • Prince: hỗ trợ javascript rất tốt nhưng đây là thư viện có tính phí bản quyền.
  • Pechkin: có 1 số vấn đề khi build và deploy website
  • TuesPechkin: khá ít tài liệu nhưng đây là 1 thư viện miễn phí khá tốt để chuyển html sang pdf.


Hôm nay mình sẽ hướng dẫn chuyển 1 page html đơn giản bằng TuesPechkin.

CÀI ĐẶT

Mở Package Console Manager
Gõ: "Install-Package TuesPechkin" để cài đặt TuesPechkin.

CHUYỂN ĐỔI NHANH TÀI LIỆU HTML

IPechkin converter = Factory.Create();
byte[] result = converter.Convert("Lorem ipsum wampum");

CHUYỂN ĐỔI TỪ NGUỒN HTML STRING

  1. Chuyển View và Master Layout thành chuỗi string
  2. Chuyển đường dẫn tương đối thành đường dẫn tuyệt đối.
  3. Gọi TuesPechkin để thực hiện việc chuyển đổi. 

Bước 1: Chuyển View thành html string

protected string RenderViewToString(string viewName, object model)
 {
     ViewData.Model = model;
     using (var sw = new StringWriter())
     {
         var viewResult = ViewEngines.Engines.FindView(ControllerContext, viewName, "_Layout");
         var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
         viewResult.View.Render(viewContext, sw);
         viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
         return sw.GetStringBuilder().ToString();
     }
 }

Bước 2: (Bạn tự implement)
Bước 3:

public ActionResult ConfigurePdfSettings()
 {
     var html = RenderViewToString("Index", null);
     html = ConvertRelativePathsToAbsolute(html, "http://yourUrl/");
     var document = new HtmlToPdfDocument
     {
         GlobalSettings =
         {
             ProduceOutline = true,
             DocumentTitle = "Pretty Websites",
             PaperSize = PaperKind.A4, // Implicit conversion to PechkinPaperSize
             Margins =
             {
                 //All = 1.375,
                 Unit = Unit.Centimeters
             }
         },
         Objects = {
             new ObjectSettings { HtmlText = html }
         }
     };

     // create converter
     IPechkin converter = Factory.Create();

     converter.Error += new TuesPechkin.EventHandlers.ErrorEventHandler(delegate(IPechkin ip, string s)
     {
         Debugger.Log(1, "Convert PDF", s);
     });

     // convert document
     byte[] result = converter.Convert(document);
     return File(result, System.Net.Mime.MediaTypeNames.Application.Octet, "test.pdf");
 }

 

select2 3.* insert data without replace content

<li class="list-group-item" data-id-user="3"><span class="badge">+</span>Song Ph'"a'"m</li>
<input type="hidden" name="partners" value="" class="multiselect-partner" style="width:100%"/>
<script type="text/javascript">
window.dataPartners = [
{ id: 4, text: "Xuân Hồng" },
{ id: 5, text: "Văn Luyện" },
{ id: 6, text: "Sau Ngu" },
];
</script>
$(document).ready(function () {
    /**
     * select2 function
     */
    if ($().select2) {
        $(".multiselect-partner").select2({
            multiple: true,
            query: function (query){
                var data = {
                    results: window.dataPartners
                };
                query.callback(data);
            },
            dropdownCssClass: "multiple", // apply css that makes the dropdown taller
            escapeMarkup: function (m) { return m; } // we do not want to escape markup since we are displaying html in results
        });
        $newItem = $('.list-group-item');
        $newItem.on('click', function () {
            var isValid = true,
                $me = $(this),
                $fieldMultiselect = $('.multiselect-partner'),
                objectData = {
                    id: $me.data('id-user'),
                    text: $me.text().substr(1)
                };
            $.each(window.dataPartners, function (index, value) {
                if (value.id == $me.data('id-user')) {
                    isValid = false;
                    return false;
                }
            });
            if (isValid === true) {
                window.dataPartners.push(objectData); /* update list dataPartners */
                /**
                 * insert this user to group chat
                 */
                var data = $fieldMultiselect.select2('data');
                data.push(objectData);
                $fieldMultiselect.select2("data", data, true);
            }
            $me.remove();
        });
    }
});



Jquery sticky banner follow on scroll

var $itemScript = $('.advertising-script-left-right');
if ($itemScript.offset()) {
    var stickyTop = [];
    $itemScript.each(function (index) {
        stickyTop.push($(this).offset().top);
    });
    $(window).scroll(function() {
        var windowTop = $(window).scrollTop();
        $itemScript.each(function (index) {
            if (stickyTop[index] < windowTop) {
                $(this).css({ position: 'fixed', top: 0 });
            } else {
                $(this).css('position', 'static');
            }
        });
    });
}

 

Basic Javascript App

Let’s start on adding some JavaScript to make the app:

 

var Gimmie = {
    $content: $('.content'),
    $form: $('form'),
    toggleLoading: function(){
        // Toggle loading indicator
        this.$content.toggleClass('content--loading');

        // Toggle the submit button so we don't get double submissions
        // http://stackoverflow.com/questions/4702000/toggle-input-disabled-attribute-using-jquery
        this.$form.find('button').prop('disabled', function(i, v) { return !v; });
    },
    userInput: '',
    userInputIsValid: false,
    appId: '',
    validate: function() {
        // Use regex to test if input is valid. It's valid if:
        // 1. It begins with 'http://itunes'
        // 2. It has '/id' followed by digits in the string somewhere
        var regUrl = /^(http|https):\/\/itunes/;
        var regId = /\/id(\d+)/i;
        if ( regUrl.test(this.userInput) && regId.test(this.userInput) ) {
            this.userInputIsValid = true;
            var id = regId.exec(this.userInput);
            this.appId = id[1];
        } else {
            this.userInputIsValid = false;
            this.appId = '';
        }
    },
    throwError: function(header, text){
        // Remove animation class
        this.$content.removeClass('content--error-pop');
        // Trigger reflow
        // https://css-tricks.com/restart-css-animation/
        this.$content[0].offsetWidth = this.$content[0].offsetWidth;
        // Add classes and content
        this.$content
            .html('<p><strong>' + header + '</strong> ' + text + '</p>')
            .addClass('content--error content--error-pop');
        this.toggleLoading();
    },
    render: function(response){
        var icon = new Image();
        icon.src = response.artworkUrl512;
        icon.onload = function() {
            Gimmie.$content
                .html(this)
                .append('<p><strong>' + response.trackName + '</strong> Actual icon dimensions: ' + this.naturalWidth + '×' + this.naturalHeight + '</p>')
                .removeClass('content--error');
            Gimmie.toggleLoading();
            // If it's an iOS icon, load the mask too
            if(response.kind != 'mac-software') {
                var mask = new Image();
                mask.src = 'assets/img/icon-mask.png';
                mask.onload = function() {
                    Gimmie.$content.prepend(this);
                }
            }
        }
    }
};
$(document).ready(function(){
    e.preventDefault();
    // On page load, execute this...
    Gimmie.toggleLoading(); // call the loading function
    Gimmie.userInput = $(this).find('input').val();
    Gimmie.validate();
    if( Gimmie.userInputIsValid ) {
        /* make API request */
        $.ajax({
            url: "https://itunes.apple.com/lookup?id=" + Gimmie.appId,
            dataType: 'JSONP'
        })
        .done(function(response) {
            // when finished
            var response = response.results[0];
            if(response && response.artworkUrl512 != null){
                Gimmie.render(response);
            } else {
                Gimmie.throwError(
                    'Invalid Response',
                    'The request you made appears to not have an associated icon. <br> Try a different URL.'
                );
            }
        })
        .fail(function(data) {
            // when request fails
            Gimmie.throwError(
                'iTunes API Error',
                'There was an error retrieving the info. Check the iTunes URL or try again later.'
            );
        });
    } else {
        /* throw an error */
        Gimmie.throwError(
            'Invalid Link',
            'You must submit a standard iTunes store link with an ID, i.e. <br> <a href="https://itunes.apple.com/us/app/twitter/id333903271?mt=8">https://itunes.apple.com/us/app/twitter/<em>id333903271</em>?mt=8</a>'
        );
    }
});