2017年8月24日 星期四

透過 FreeSpire.Office 轉成 PDF 後紙張設定會跑掉,例如 A5 變A4、 橫向變直向

以 Spire.PDF 讀入資料並轉成另一個 PDF 同時重設紙張設定 document.SaveToStream(memStreamPDF, Spire.Doc.FileFormat.PDF); // 以 Spire.Doc 為例
using (var pdf = new PdfDocument(memStreamPDF))
using (var newPdf = new PdfDocument()) {
foreach (PdfPageBase page in pdf.Pages) {
PdfPageBase newPage = newPdf.Pages.Add(PdfPageSize.A5, new PdfMargins(0), PdfPageRotateAngle.RotateAngle0, PdfPageOrientation.Landscape);
PdfTextLayout loLayout = new PdfTextLayout();
loLayout.Layout = PdfLayoutType.OnePage;
page.CreateTemplate().Draw(newPage, new System.Drawing.PointF(0, 0), loLayout); } newPdf.SaveToStream(memStreamPDF);
...
}

※多頁word 轉PDF 會有問題,且格式會有出入,調整紙張格式也不成功,目前不建議把word轉成PDF

使用 epplus 產生檔案後轉成 PDF

使用 FreeSpire.XLS
...
ep.Save();
using (var workbook = new Workbook())
using (var memStream = new MemoryStream()) {
workbook.LoadFromStream(ep.Stream as MemoryStream);
workbook.SaveToStream(memStream, Spire.Xls.FileFormat.PDF);
...
}

※FreeSpire.Office 包含 FreeSpire.XLS 和其他相關套件,可以操作 word,excel,... 並轉為PDF

2017年8月18日 星期五

Datepicker Popup 使用範例

<span class="input-group"><input uib-datepicker-popup="yyyy/MM/dd" ui-mask="9999/99/99" model-view-value="true" is-open="popupInvoice.opened" type='text' class='form-control' ng-model='selectData["憑證日期"]'><span class="input-group-btn"><button type="button" class="btn btn-default" ng-click="popupInvoice.opened=true"><i class="glyphicon glyphicon-calendar"></i></button></span></span>

若容器有設定overflow,日期選擇視窗不要被容器遮住,造成容器出現捲軸,請在 module 加入
.config(['uibDatepickerPopupConfig', function (uibDatepickerPopupConfig) {
            uibDatepickerPopupConfig.appendToBody = true;
        }])

若在 $uibModal 中使用,須設定 z-index 避免被遮住
.uib-datepicker-popup {
    z-index: 1060 !important; /*避免被$uibModal遮住*/
}

讓文字顯示成中文
====
安裝 angular-i18n

2017年8月17日 星期四

按鈕群組按下效果

靜態寫法(單選)
====
<div class="btn-group" style="margin-left:10px"> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="">全部</label> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="false">未過帳</label> <label class="btn btn-primary" ng-model="pass" uib-btn-radio="true">已過帳</label> </div>

動態寫法(單選)
====
<div class="btn-group"> <label class="btn btn-primary" ng-model="$parent.from" uib-btn-radio="'{{obj.from | date:'yyyy/M'}}'" ng-repeat="obj in dateRange">{{(obj.from | date:'yyyy/M')+'~'+(obj.to | date:'M')}}</label> </div>

動態寫法(多選)
====
<div class="btn-group"> <label class="btn btn-primary" ng-repeat="date in dates" ng-model="date.checked" uib-btn-checkbox>{{date.shortText}}</label></div>

自訂css
====
.btn-date {
        color: black;
        background-color: #f8f8f8;
        border-color: #ccc;
    }
.btn-date.active, .btn-date:active, .open > .dropdown-toggle.btn-date {
        color: #ffffff;
        background-color: #449d44;
        border-color: #398439;
    }

input 連結 datalist 用程式控制彈出選項

範例: nextTick(() => document.querySelector('input').showPicker());  ※僅支援現代瀏覽器