溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

利用jqprint插件打印頁面內(nèi)容的實(shí)現(xiàn)方法

發(fā)布時(shí)間：2020-09-10 05:32:04 來源：腳本之家 閱讀：143 作者：彩虹的夜晚 欄目：web開發(fā)

業(yè)務(wù)場景

客戶需要在頁面有一個(gè)打印按鈕，點(diǎn)擊之后可以打印Echarts圖表的內(nèi)容以及文字提示信息，經(jīng)谷歌搜索發(fā)現(xiàn)，實(shí)現(xiàn)方法大概有三種之多，其他兩種不太熟悉，而采用的這種打印方式是一個(gè)在jQuery的基本上開發(fā)的一個(gè)print插件，因此可以使用jQuery的方式查找元素，因此決定采用這種方式。

先看一下實(shí)現(xiàn)的效果圖，如下：

利用jqprint插件打印頁面內(nèi)容的實(shí)現(xiàn)方法

實(shí)現(xiàn)效果圖

引入js文件

<script type="text/javascript" src="__JS__/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="__JS__/jqprint-0.3.js"></script>

注意：這里是先引入的jQuery文件，如果沒有引入第一個(gè)js文件的話，會(huì)出現(xiàn)兼容性問題，導(dǎo)致使用jqprint打印時(shí)報(bào)錯(cuò)。

html頁面

這里面的html標(biāo)簽很多的

<div class="wrap-content container" id="container">
 <table border="0" cellpadding="0" cellspacing="0" class="store-joinin baseinfo">
  <thead>
   <tr>
    <th colspan="40">用戶信息</th>
   </tr>
  </thead>
  <tbody>
   <tr >
    <th>姓名：</th>
    <td colspan="40">18030632605</td>
   </tr>
   <tr >
    <th>性別：</th>
    <td colspan="40">男</td>
   </tr>
   <tr >
    <th>年齡：</th>
    <td colspan="40">41</td>
   </tr>
   <tr >
    <th>身份證：</th>
    <td colspan="40">52272419770101059X</td>
   </tr>
   <tr >
    <th>所屬機(jī)構(gòu)：</th>
    <td colspan="40">上海市政法委</td>
   </tr>
  </tbody>
  </table>
 ......
 <button class="btn btn-danger printBtn1" onclick="btnPrintClick()" type="button">打 印</button>

當(dāng)然下面還有很多的html標(biāo)簽，在這里就不展示了。

打印按鈕點(diǎn)擊之后執(zhí)行的函數(shù)

function btnPrintClick(){
 var imgBox = $('#img_box');
 var chartBox = $('#main');
 if (imgBox.length <= 0) {
  chartBox.after('<div id="img_box"></div>');
  imgBox = $('#img_box');
 }
 // 將echart生成圖片并放入img-box，并顯示圖片img-box
 imgBox.html('< img src="' + myChart.getDataURL() + '"/>').css('display','block');
 // 隱藏echart圖chart-box
 chartBox.css('display','none');
 // 調(diào)整img大小
 var img = imgBox.find('img');
 var imgWidth = img.width();
 var showWidth = 1000; // 顯示寬度，即圖片縮小到的寬度
 if (imgWidth > showWidth) { // 只有當(dāng)圖片大了才縮小
  var imgNewHeight = img.height() / (imgWidth / showWidth);
  img.css({'width': showWidth + 'px', 'height': imgNewHeight + 'px'});
 }
 var imgBox2 = $('#img_box2');
 var chartBox2 = $('#main2');
 if (imgBox2.length <= 0) {
  chartBox2.after('<div id="img_box2"></div>');
  imgBox2 = $('#img_box2');
 }
 // 將echart生成圖片并放入img-box，并顯示圖片img-box
 imgBox2.html('< img src="' + myChart2.getDataURL() + '"/>').css('display','block');
 // 隱藏echart圖chart-box
  chartBox2.css('display','none');
 // 調(diào)整img大小
 var img2 = imgBox2.find('img');
 var img2Width = img2.width();
 var show2Width = 1000; // 顯示寬度，即圖片縮小到的寬度
 if (img2Width > show2Width) { // 只有當(dāng)圖片大了才縮小
  var img2NewHeight = img2.height() / (img2Width / show2Width);
  img2.css({'width': show2Width + 'px', 'height': img2NewHeight + 'px'});
 }
 // 打印
 $("#TestQuestions").jqprint();
 // 執(zhí)行打印后再切換回來
 // 顯示echart圖chart-box
 chartBox.css('display','block');
 chartBox2.css('display','block');
 // 隱藏圖片img-box
 imgBox.css('display','none');
 imgBox2.css('display','none');
}

注意事項(xiàng)：

這里使用了圖片的縮放比例的方式。比如Echarts圖表要顯示的內(nèi)容特別多的話，一般在html頁面中采用的是在X軸上使用滾動(dòng)條的方式，但是打印時(shí)可以將Echarts圖表先轉(zhuǎn)換成圖片，并等比例進(jìn)行縮放，打印完畢之后再還原回來即可。

任何不需要打印的標(biāo)簽都可以先隱藏。對于不需要出現(xiàn)在打印頁面的標(biāo)簽內(nèi)容，我們在打印之前使用jQuery查找到對應(yīng)的元素，將該元素隱藏起來，打印結(jié)束之后，再將隱藏的元素顯示出來即可。

屬性

  • debug: false, //如果是true則可以顯示iframe查看效果（iframe默認(rèn)高和寬都很小，可以再源碼中調(diào)大），默認(rèn)是false
  • importCSS: true, //true表示引進(jìn)原來的頁面的css，默認(rèn)是true。（如果是true，先會(huì)找$("link[media=print]")，若沒有會(huì)去找$("link")中的css文件）
  • printContainer: true, //表示如果原來選擇的對象必須被納入打?。ㄗ⒁猓涸O(shè)置為false可能會(huì)打破你的CSS規(guī)則）。
  • operaSupport: false //表示如果插件也必須支持歌opera瀏覽器，在這種情況下，它提供了建立一個(gè)臨時(shí)的打印選項(xiàng)卡。默認(rèn)是true

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手