bootstrap table和tableExport匯出支援中文的Excel和pdf等表格

阿新 • • 發佈：2019-01-12

前言

由於最近專案有一個匯出表格為pdf格式，所以就做了這個功能。由於專案的表格是基於bootstrap和bootstrap table實現的，相對於easyUI來說它的優點是更方便，更好相容。
從程式碼可以發現bootstrap table本身是沒有實現表格的匯出的，需要擴充套件外掛tableExport，擴充套件的tableExport在匯出csv，txt，sql，json等格式的時候能很好的支援中文，不過需要匯入相應js檔案（本文會解決），但是對於pdf格式的就不支援中文了，如何解決是本文的中點。

前提
首先得下載幾個外掛：

注意

由於bootstrap和其擴充套件的外掛都是基於jquery來實現的，所以在使用這些外掛的時候必須先把jquery引入。

對於版本有要求，bootstrap對jquery的版本有依賴，在bootstrap的bower.json 檔案中列出了 bootstrap 所支援的 jquery 版本，請對應下載jquery版本。
不能把單個的css、js檔案提出來放在一個檔案中因為有的檔案有關聯，提出來就導致某些功能用不了。

步驟下載的檔案整理：

新建檔案bootstrap_above；
將下載的tableExport.jquery.plugin-master檔案重新命名為tableExport；
將重新命名的tableExport和下載的bootstrap、bootstrap-table-develop、jquery-1.9.1檔案放入bootstrap_above檔案中。

修改檔案，tableExport預設是使用jspdf來實現匯出pdf的，但是jspdf不支援中文，所以我們改用pdfmake方式，但是必須自定義字型生成vfs_fonts.js，博主已經自定義好需要的請自己下載。將vfs_fonts.js檔案替換掉bootstrap_above\tableExport\libs\pdfmake目錄下的vfs_fonts.js檔案。
將tableExport.js檔案的程式碼

pdfmake: {enabled: false,                               // true: use pdfmake instead of jspdf and 
 jspdf-autotable (experimental)
                  docDefinition: {pageOrientation: 'portrait',  // 'portrait' or 'landscape'
                                  defaultStyle: {font: 'Roboto' // default is 'Roboto', for arabic font set this option to 'Mirza' and include mirza_fonts.js
                                                }
                                 },
                  fonts: {}
                 },

修改為

pdfmake: {enabled: true},

將tableExport.js檔案的程式碼

          var docDefinition = { content: [ {
                                  table: {
                                    headerRows: $hrows.length,
                                    widths: widths,
                                    body: body
                                  }
                               }]};

          $.extend(true, docDefinition, defaults.pdfmake.docDefinition);

          pdfMake.fonts = {
            Roboto: {
              normal: 'Roboto-Regular.ttf',
              bold: 'Roboto-Medium.ttf',
              italics: 'Roboto-Italic.ttf',
              bolditalics: 'Roboto-MediumItalic.ttf'
            }
          };
            $.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);

替換為

pdfMake.fonts = {
                Roboto: {
                    normal: 'Roboto-Regular.ttf',
                    bold: 'Roboto-Medium.ttf',
                    italics: 'Roboto-Italic.ttf',
                    bolditalics: 'Roboto-Italic.ttf'
                },
                微軟雅黑: {
                    normal: 'msyh.ttf',
                    bold: 'msyhbd.ttf',
                    italics: 'msyh.ttf',
                    bolditalics: 'msyhbd.ttf'
                }
            };

            $.extend(true, pdfMake.fonts, defaults.pdfmake.fonts);
            var docDefinition = {
                pageOrientation: 'landscape',
                content: [
                    {
                        table: {
                            headerRows: $hrows.length,
                            widths: widths,
                            body: body
                        }
                    }
                ],
                defaultStyle: {
                    font: '微軟雅黑'
                }
            };
            $.extend(true, docDefinition, defaults.pdfmake.docDefinition);

至此前期工作就做好了，接下來就是使用了。

html程式碼（注意引用js的順序，部分順序不能改變）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="icon" href="img/favicon.ico">
        <title>Bootstrap 模板</title>
        <!--
            描述：樣式匯入
        -->
        <link rel="stylesheet" href="js/bootstrap_above/bootstrap/css/bootstrap.min.css" />
        <link rel="stylesheet" href="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.css"/>

        <!--
            描述：js匯入，注意順序，jquery必須引入
            bootstrap-table-zh-CN.js為表格漢化的檔案
            FileSaver.min.js等是關聯引用檔案
        -->
        <script src="js/bootstrap_above/jquery-1.9.1/jquery.min.js"></script>
        <script src="js/bootstrap_above/bootstrap/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/bootstrap-table.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/locale/bootstrap-table-zh-CN.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/bootstrap-table-develop/dist/extensions/export/bootstrap-table-export.js"></script>

        <script src="js/bootstrap_above/tableExport/libs/pdfmake/pdfmake.min.js"></script>
        <script src="js/bootstrap_above/tableExport/libs/pdfmake/vfs_fonts.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/FileSaver/FileSaver.min.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF/jspdf.min.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/tableExport/libs/jsPDF-AutoTable/jspdf.plugin.autotable.js"></script>
        <script type="text/javascript" src="js/bootstrap_above/tableExport/tableExport.js"></script>

        <script src="js/table.js"></script>
    </head>
    <body>
        <table class="table-responsive" id="db_dependences">

        </table>
    </body>
</html>

js塊table.js程式碼


$(function () {
    $('#db_dependences').bootstrapTable({
        method:'POST',
        dataType:'json',
        contentType: "application/x-www-form-urlencoded",
        cache: false,
        striped: true,                              //是否顯示行間隔色
        sidePagination: "client",           //分頁方式：client客戶端分頁，server服務端分頁（*）
        showColumns:true,
        pagination:true,
        minimumCountColumns:2,
        pageNumber:1,                       //初始化載入第一頁，預設第一頁
        pageSize: 20,                       //每頁的記錄行數（*）
        pageList: [10, 25, 50, 100],        //可供選擇的每頁的行數（*）
        uniqueId: "id",                     //每一行的唯一標識，一般為主鍵列
        showExport: true,                    
        exportDataType: 'all',
        exportTypes:[ 'csv', 'txt', 'sql', 'doc', 'excel', 'xlsx', 'pdf'],  //匯出檔案型別
        columns: [{
            field: 'id',
            title: 'Item ID'
        }, {
            field: 'name',
            title: 'Item Name'
        }, {
            field: 'price',
            title: 'Item Price'
        }],
        data: [{
            id: 1,
            name: '專案 1',
            price: '價格$1'
        }, {
            id: 2,
            name: '專案 2',
            price: '價格$2'
        }]
    });
});

結果不多說有圖才有真相

介面截圖a
介面截圖b
pdf結果

原始碼下載

下載連結：ExportPDF_ch
注：本文為原創，轉載請註明出處。

bootstrap table和tableExport匯出支援中文的Excel和pdf等表格

前言由於最近專案有一個匯出表格為pdf格式，所以就做了這個功能。由於專案的表格是基於bootstrap和bootstrap table實現的，相對於easyUI來說它的優點是更方便，更好相

使用bootstrap table時不能顯示篩選列和分頁每頁顯示的行數

pts -i str 顯示 data bootstra 同事 bootstrap src 使用bootstrap table時不能顯示篩選列和分頁每頁顯示的行數後來在同事的幫助下，才發現沒有引用bootstrap的js文件 <script src="/Scr

樹莓派(raspberry pi)學習6: 中文支援(中文顯示和中文輸入法)

樹莓派(raspberry pi)的原版是沒有中文支援的，需安裝 startx 後，用 Midori 瀏覽器可以瀏覽網頁瀏覽www.baidu.com，一堆亂碼安裝中文顯示支援第一步，先為終端進行相關更新：sudo apt-get update 第二步：為

擴充套件Bootstrap-table外掛使其支援通過下拉框快速跳轉至任意頁數

前言最近專案使用的Metronic前端框架，表格外掛採用bootstrap-table V1.11.1（http://bootstrap-table.wenzhixin.net.cn/zh-cn/），是一款功能強大的表格外掛，非常適合在後臺管理系統裡使用。在

讓Tomcat支援中文路徑和中文檔名

apache-tomcat-6.0.35\conf目錄中server.xml <Connector URIEncoding="utf-8" port="8080" protocol="HTTP/1.1" connectionTimeou

設定 putty 支援中文輸入和顯示

預設情況下，putty上中文將顯示亂碼，如果遠端 linux 的 locale 設定為 zh_CN.*(bg2312,gbk,utf8等等），顯示就是亂碼。其實 putty 的中文支援還是很好的。開啟putty主程式，照我這樣設定，我已經用紅框標明我使用的是Yah

在python中使用openpyxl和xlrd建立一個新Excel並把原表格資料複製到新表中

在Python中使用openpyxl和xlrd建立一個新Excel並把原表格資料複製到新表中新的開始文科出生，經濟學專業，年近四旬，純粹是把這個當成一個興趣在學。很早之前就打算學Python，但是一直停留在安裝好Python，這幾天比較空閒，開始從最最基礎自

bootstrap table footerFormatter用法統計列求和 sum、average等

其實上一篇blog裡已經貼了程式碼，簡單解釋一下吧： 1、showFooter: true,很重要，設定footer顯示： $(cur_table).bootstrapTable({ url:

如何在Android的ListView中構建CheckBox和RadioButton列表(支援單選和多選的投票專案示例)

引言我們在android的APP開發中有時候會碰到提供一個選項列表供使用者選擇的需求，如在投票型別的專案中，我們提供一些主題給使用者選擇，每個主題有若干選項，使用者對這些主題的選項進行選擇，然後提交。本文以一個支援單選和多選投票專案為例，演示了在一個ListView中如何構建CheckBox列表和Ra

基於CSerialPort修改類的串列埠除錯助手原始碼（支援中文、自動儲存等）

QQ技術交流群：129518033最新進展：CSerialPort串列埠類最新修正版2017-12-16本串列埠工具整合目前多數串列埠工具的優秀功能於一身，採用CSerialPort類進行編寫，並在此基礎上對該類進行了改進。本工具免費試用，永不過期。並且本著奉獻的精神，公開本

用VC和MinGW匯出dll的def和lib(a)檔案

開發十年，就只剩下這套架構體系了！ >>>

如何從word、excel、pdf等檔案中提取文字（Tika）

Tika-內容分析工具包官方網站：https://tika.apache.org/ 在maven倉庫下載最新版依賴 https://mvnrepository.com/artifact/org.apache.tika/tika-parsers 懶得去的同學，提供一個筆者正在使

java 技術文件用java獲得word，excel，pdf等文件的內容

很多人用java進行文件操作時經常會遇到一個問題，就是如何獲得word，excel，pdf等文件的內容？我研究了一下，在這裡總結一下抽取word,pdf的幾種方法。　　1. 用jacob 　　其實jacob是一個bridage，連線java和com或者win32函式的一箇

解決bootstrap table的export擴充套件模組利用tableExport匯出pdf中文亂碼問題

緣由：沒有積分了，怎麼破？自己研究。參考文章：https://blog.csdn.net/qq_34117170/article/details/72765646https://www.cnblogs.com/xrab/p/7210588.htmlhttps://www.np

PDF電子發票解析成excel，支援批量解析和匯出功能

PDF電子發票解析成excel，支援批量解析和匯出功能 https://blog.csdn.net/m0_38035006/article/details/84880018#comments https://www.promiseblog.cn 合計稅額 13.27 貨物名稱 (詳見銷貨清單) 受票方識

基於bootstrap table分頁資料及行內編輯和匯出資料（一）

第一步，匯入相應的css和js檔案 <link href="~/Content/bootstrap.min.css" rel="stylesheet" />  <

十七 bootstrap-table tableExport 匯出xlsx格式表格

在[十六、bootstrap-table javascript匯出資料]中，開啟匯出的表格時，總會彈出一個提示窗那麼，匯出xlsx格式的應該就沒問題了吧？！實驗如下，查詢tableExport.js資料 TableExport外掛依賴於jQu

結合bootstrap fileinput外掛和Bootstrap-table表格外掛，實現檔案上傳、預覽、提交的匯入Excel資料操作流程

1、bootstrap-fileinpu的簡單介紹在前面的隨筆，我介紹了Bootstrap-table表格外掛的具體專案應用過程，本篇隨筆介紹另外一個Bootstrap FieInput外掛的使用，整合兩者可以實現我們常規的Web資料匯入操作，匯入資料操作過程包括有上傳檔案，預覽資料，選擇並提交記錄等一系

在使用bootstrap-table匯出excel時遇到了問題：第一列顯示為on

使用bootstrap-table自帶的匯出excel時，頁面第一列為複選框，如圖：此時匯出的excel會多出一列，且值為on,如圖：解決辦法如下，直接上程式碼： exportOptions : { ignoreColumn: [0], fil

純JS匯出excel（支援中文）

JsonExportExcel 簡介使用方法 1.引入js (dist目錄下JsonExportExcel.min.js) <script src="https://cuikangjie.github.io/JsonExportExcel/dist/Js

bootstrap table和tableExport匯出支援中文的Excel和pdf等表格

相關推薦