はじめに：CSSのノードを取得少ないEChartsよりプラグインのためのVueにEChartsは、チャートを印刷しない独自のページの印刷を使用するとされます。プリントアウトの結果は空になります。オンラインリファレンス複数のドキュメントの後、手順の概要は、すべての人のために、ヘルプのビットを提供することを望んで、述べビットをセットします。
1.ファイルフォルダ内print.js Vueのプロジェクト、ファイルの内容を作成します。
//打印类属性、方法定义
/ * eslint-無効* /
constの印刷=機能（DOM、オプション）{
場合（（このinstanceofは印刷）！）（DOM、オプション）新しい印刷を返します。
this.options = this.extend（{
'NOPRINT'： '.NO印刷'
}、オプション）。
IF（（typeof演算DOM）=== "ストリング"）{
this.dom = document.querySelector（DOM）。
}他{
this.isDOM（DOM）
this.dom = this.isDOM（DOM）？DOM：DOM $エル;。
}
this.init（）。
}。
Print.prototype = {
INIT：関数（）{
VAR含量= this.getStyle（）+ this.getHtml（）。
this.writeIframe（コンテンツ）。
}、
伸びる：関数（OBJ、OBJ2）を{
（OBJ2でのvar k）に対する{
OBJ [K] = OBJ2 [K]。
}
OBJ返します。
}、
でgetStyle：関数（）{
VAR列str = ""
スタイル= document.querySelectorAll（ 'スタイル、リンク'）;
以下のために（; I <styles.length; VAR iが0 = I ++）{
STR + =スタイル[I] .outerHTML。
}
STR + = "<スタイル>" +（this.options.notPrint this.options.notPrint： '.NO印刷'？）+ "{表示：なし;} </スタイル>"。
STR + = "<スタイル> .results {幅：100％重要！;} .result .TITLE {幅：100％;} </スタイル>";
STRを返します。
}、
getHtml：関数（）{
VAR入力= document.querySelectorAll（ '入力'）。
VAR選択= document.querySelectorAll（ '選択'）。
VAR遊説= document.querySelectorAll（ 'キャンバス'）;
用（VARのK = 0; K <inputs.lengthあり、k ++）{
IF（入力が== .TYPE [k]が入力|| == .TYPE "ラジオ" "チェックボックスを" [K]）{
IF（入力[K] {）==真.checkedを
入力[K] .setAttribute（ 'チェック'は、 "チェック"）
} {他
の入力[K] .removeAttribute（ '確認'）
}
（入力[K] .TYPE == "場合そう}テキスト"）{
入力が入力[K] .VALUE）は、.setAttribute（ '値を' [K]
他{}
入力が.setAttribute（ '値'、入力[k]を[K]。
IF（テキストエリア[K2] .TYPE == 'TEXTAREA'）{
テキストエリア[K2] .innerHTML =テキストエリア[K2] .VALUE
}
}
のための（VAR K3 = 0; K3 <selects.length; K3 ++）{
IF（選択[ K3] .TYPE == 'を選択ワン'）{
VARの子=選択[K3] .children。
（VAR I子で）のために{
IF（子[I] .tagName == 'OPTION'）{
IF（子[I] .selected == TRUE）{
子が[i]は.setAttribute（ '選択'、 "選択" ）
}他{
子[I] .removeAttribute（ '選択'）
}
}
}
}
}
//キャンバスechars图表转为图片
用（VAR K4 = 0; K4 <canvass.length; K4 ++）{
VAR imageURLに=キャンバス[K4] .toDataURL（ "画像/ PNG"）。
VAR IMG =のdocument.createElement（ "IMG"）;
img.src = imageURLに。
img.setAttribute（ 'スタイル'、 'のmax-width：100％;'）;
img.className = 'isNeedRemove'
//キャンバス[K4] .style.display = 'なし'
//キャンバス[K4] .parentNode.style.width = '100％'
//キャンバス[K4] .parentNode.style.textAlign = '中央'
キャンバス[K4] .parentNode.insertBefore（IMG、キャンバス[K4] .nextElementSibling）。
}
//做分页
//スタイル= "改ページ-後：常に"
VARページ= document.querySelectorAll（ 'コンテンツ'）;
ページ[K5] .setAttribute（ 'スタイル'、 '改ページ-後：常に'）;
}
this.dom.outerHTMLを返します。
}、
writeIframe：機能（コンテンツ）{
VAR W、DOC、IFRAME =のdocument.createElement（ 'IFRAME'）、
F = document.body.appendChild（IFRAME）。
iframe.id = "myIframe"。
//iframe.style = "位置：絶対;幅：0;高さ：0;上部：-10px;左：-10px;";
iframe.setAttribute（ 'スタイル'、 '位置：絶対;幅：' + document.querySelector（ '＃7'）clientWidth + 'PX;高さ：0;トップ：-10px;左：-10px;'）;
ワット= f.contentWindow || f.contentDocument;
DOC = f.contentDocument || f.contentWindow.document;
doc.open（）;
doc.write（コンテンツ）。
doc.close（）;
VAR削除し= document.querySelectorAll（ 'isNeedRemove'）;
{（; K <removes.length K ++ VAR K = 0）のため
削除し、[K] .parentNode.removeChild（削除[K]）。
}
のvar _this =この
iframe.onload =関数（）{
_this.toPrint（W）。
setTimeout（関数（）{
document.body.removeChild（IFRAME）
}、100）
}
}、
toPrint：関数（frameWindow）{
試み{
たsetTimeout（関数（）{
frameWindow.focus（）;
試み{
（frameWindow.documentなら！ .execCommand（ 'プリント'、偽、NULL））{
frameWindow.print（）;
}
}キャッチ（E）{
frameWindow.print（）。
}
frameWindow.close（）。
}、10）;
}キャッチ（ERR）{
にconsole.log（ 'ERR'、ERR）。
}
}、
isDOM：（typeof演算のHTMLElement === 'オブジェクト'）？
関数（OBJ）{
リターンOBJのinstanceofのHTMLElement。
}
関数（OBJ）{
リターンOBJ && typeof演算OBJ === 'オブジェクト' && obj.nodeType === 1 && typeof演算obj.nodeName === 'ストリング';
}
}。
CONST MyPlugin = {}
MyPlugin.install =関数（ヴュ、オプション）{
// 4.添加实例方法
Vue.prototype。
2.グローバルな使用が見つかりmain.jsに登録します。ここに私のコードです
インポート「./http/print」から印刷
Vue.use（印刷）
EChartsページでは3、彼のカスタム印刷方法
<EL-ボタンタイプ= "情報は、 " @ = "printTest（）"プレーンをクリック> 印刷</ EL-ボタン> //印刷ボタン
printTest（）{//印刷する方法を
、この。$は、印刷（この。$ refs.print、 { 'notPrint'： 'EL-ボタン、.EL-SELECT'}）
}
4.特別な注意事項：
print.js VARページ= document.querySelectorAll（ 'コンテンツに '）; 及びdocument.querySelector（「＃ 7 PX '）clientWidth +' ;高さ：0;トップ：-10px;左：-10px;「）;
セレクタ独自のカスタムページを変更する#seven .content。
ここでの場所の私の選択接辞、我々はdivの中に上記の2つの入れ子のセレクタとの間の関係に注意を払う必要があります
<テンプレート>
<DIV CLASS = "コンテンツ" ID = "印刷" REF = "印刷">
<DIV CLASS = "ブロック">
<EL-日付ピッカー
Vモデル= "value2の"
タイプ= "datetimerange"
形式= "YYYY-MM-DD HH：MM：SS"
：ピッカー・オプション= "pickerOptions"
範囲セパレータ= "至"
開始プレースホルダ= "开始日期"
エンドプレースホルダ= "结束日期"
>
</ EL-日付ピッカー>
<EL-ボタンタイプ= "情報"をクリックし@ = "DT（）">查询</ EL-ボタン>
<EL-ボタンタイプ=クリック= "printTest（）"プレーン@ "情報">打印</ EL-ボタン>
</ div>
< - <Pクラス= "prompt_p">＆NBSP;＆NBSP;＆NBSP;動的データのテスト</ P> - ！>
<divのスタイル= "高さ：580px;" ID = "七">
</ DIV>
</ DIV>
</テンプレート>
参考文献：
https://blog.csdn.net/shishuwei111/article/details/94167974#comments
彼も発現感謝のために！
----------------
免責事項：この記事は、元の記事のCSDNブロガー「元帥の国」で、CC 4.0 BY-SAの著作権契約書に従って、再現し、元のソースとのリンクを添付してくださいこの文。
オリジナルリンクします。https：//blog.csdn.net/qq_43251032/article/details/101281839
