利用jQuery.print.js實現canvas的列印功能

阿新 • • 發佈：2018-12-31

需求

把在瀏覽器中的利用canvas做的圖實現列印功能

思路

先把canvas轉換成img
把生成的img利用jQuery外掛jquery.print.js實現圖片列印功能

資料連結

效果圖

這裡寫圖片描述

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #click{
            width 
: 40px;
            height: 30px;
            border:1px solid #0d1721;
            background: #0B8CD4;
            cursor: pointer;
        }
    </style>
    <script src="js/jquery-3.1.1.js"></script>
    <script src="js/jQuery.print.min.js"></script>
</head>
<body> 

    <canvas id="canvasTest" width="1000px" height="500px"></canvas>
    <div id="click">列印</div>
    <script>
        var  showConvas = document.getElementById("canvasTest");
        if(showConvas.getContext){
            var ctx = showConvas.getContext("2d");
            ctx.beginPath();
            ctx.moveTo(100 
,250);
            ctx.lineTo(900,250);
            ctx.stroke();
            ctx.beginPath();
            ctx.moveTo(500,0);
            ctx.lineTo(500,500);
            ctx.stroke();
        }
        function convertCanvasToImage(canvas) {
            var image = new Image();
            image.src = canvas.toDataURL("image/png");
            return image;
        }
        $("#click").click(function () {
            $(convertCanvasToImage(showConvas)).print();
        });

    </script>
</body>
</html>

利用jQuery.print.js實現canvas的列印功能

需求把在瀏覽器中的利用canvas做的圖實現列印功能思路先把canvas轉換成img 把生成的img利用jQuery外掛jquery.print.js實現圖片列印功能資料連

利用jquery.print.js實現自定義網頁列印

最近做專案。客戶好些地方需要列印網頁上的表格，研究了好些方法都不太理想。最後找到一個jquery.print.js列印外掛，非常方便就可以實現想要的網頁列印效果，值得推薦。實現方法引用jquery和，jqprint到您的頁面 <script la

js 利用jquery.gridly.js實現拖拽並且排序

user push idl osi llb ext true js實現 idt <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

利用jquery的contains實現搜索功能

sea clas .sh 搜索功能 display fun != ont 搜索 1 / jquery實現的搜索功能 2 $(‘#search_btn‘).on(‘click‘,function(){ 3 var txt=$(‘#inputVa

js實現區域性列印功能

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>區域性列印案例<

Jquery、Js實現網頁列印，及列印樣式的自定義

<!DOCTYPE html> <html lang="en" style="height: 100%"> <head> <meta charset="UTF-8"> <title>Title</title> &

原生js利用圖靈機器人實現自動回覆功能

HTML程式碼： <style type="text/css"> * { padding: 0; margin: 0; } .imgLayout { width: 100%; height: 100%; margin: 0 auto;

JS：實現頁面列印功能

利用JS實現列印操作條件：IE瀏覽器的WebBrowser外掛，WebBrowser是IE的內建外掛，只需IE即可開啟，可自動使用外掛前提：在html程式碼的body標籤下呼叫WebBrowser外掛，程式碼如下 <object id="WebBrowser"

jquery.print.js列印

使用jQuery.print.js列印

在網頁開發的過程中不可避免會使用到瀏覽器的列印功能，通常情況下開發者需要在列印完成後提示使用者進行確認，然後傳送更新請求。作者在寫這篇博文之前遇到過類似的應用場景：在開發某景區的兌票系統的時候，專案方要求使用他們自己的印表機進行本地列印兌票對證單，已經兌換的票不

Jquery Jqprint—藉助Jquery Jqprint實現網頁列印功能

今天利用閒餘時間研究了一下Jquery Jqprint外掛，使用該Jquery指令碼可以輕而易舉的實現列印網頁指定區域內容的功能：例子一：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stric

利用純js實現判斷變色功能改進版

o=document.getElementsByTagName('table'); for(i=0; i<o[0].rows.length; i++){ td=o[0].rows[i].cells[3]; if(td.textContent < '2018-12-20 1

利用純js實現判斷變色功能

table=document.getElementsByTagName('table'); for(i=0; i<table[0].rows.length; i++){ if(table[0].rows[i].cells[3].textContent > '2018-12-

利用裝飾器實現日誌列印功能

import datetime import functools def log(text): def decorator(func): @functools.wraps(func) #內建函式使新建的函式屬性不變 def wrapper(*args, **k

通過jquery.cookie.js實現記住使用者名稱和密碼的功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

利用jquery.form.js的ajaxSubmit實現不跳轉提交表單資料

我們直接通過form提交的話，提交後當前頁面跳轉到form的action所指向的頁面。然而，很多時候我們比不希望提交表單後頁面跳轉，那麼，我們就可以使用ajaxSubmit(obj)來提交資料 1. //form表單阻止提交 <form onsubm

jquery-barcode:js實現的條碼列印

這是一個純js的jQuery外掛，專案地址：http://barcode-coder.com/en/barcode-jquery-plugin-201.html 使用示例: <!doctype html> <html> <head&

一款很好用的Jquery 列印外掛——jQuery.print.js

在進行網頁開發中不可避免會使用到列印功能，下面就來學習一下一款簡單易用的外掛吧！配置引數你可以在呼叫列印方法時傳入一些引數： $("#myElementId").print({ globalStyles:true,//是否包含父文件的樣式，預設為t

通過jquery.cookie.js實現記住使用者名稱、密碼登入功能

<!doctype html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text

利用shell腳本實現計劃任務功能 V1.2

target 無需重啟控制 basedir 之間集中 shell腳本 htm 方便 2013.05.10 mytask 1.2 　　主程序休眠時間分成若幹小的時間片斷分段休眠，避免長時間的休眠不能及時響應系統信號。 2013.05.07 mytask 1

利用jQuery.print.js實現canvas的列印功能

需求

思路

資料連結

效果圖

程式碼

相關推薦