vue chart jsが印刷プレビューに表示されない

こんにちは、私はプロジェクトでvue chartjs link of npm packageを使用しています。vue chart jsが印刷プレビューに表示されない

チャートが正常に動作しているが、私は複数のグラフは、私はチャートを見ていない午前、プレビューウィンドウに次のコード

let divContents = $("#exportDiv").html(); 
let printWindow = window.open('', '', 'height=400,width=800'); 
printWindow.document.write('<html><head><title>Report</title>'); 
printWindow.document.write('<link rel=\"stylesheet\" href=\"css/style.css\" type=\"text/css\" />'); 
printWindow.document.write('<link rel=\"stylesheet\" href=\"css/bootstrap.min.css\" type=\"text/css\" />'); 
printWindow.document.write('</head><body >'); 
printWindow.document.write(divContents); 
printWindow.document.write('</body></html>'); 
printWindow.document.close(); 
setTimeout(function(){printWindow.print();},1000);

を使用して実装されているのdivを印刷しようとしていたとき。

注：チャートは、私はCtrlキーを押しています+ Pチャートが表示されている場合、私は、ボタンのクリックで印刷を呼び出していた場合にのみ表示されていません。私はCtrl + Pを使用することはできませんので、私は特定のdivだけを印刷したいです。

何が間違っていますか？

私は

<vue-chart type="doughnut" :height="100" :options="optionsInvestorResearch" :data="chartInvestorResearch"></vue-chart>

それを宣言していますし、私のoptinonsが

chartInvestorResearchです：{}、 optionsInvestorResearch：{

title: { 
     display: false, 
     fontsize: 14, 
     text: 'Total de Pedidos por Situação' 
    }, 
    legend: { 
     display: true, 
     position: 'right', 
    }, 
},

アップデート：私は私のチャートの宣言およびオプションが含まれていました。

出典

2017-12-14 rajesh

エラーや警告がコンソールに表示されている可能性があります。 – samayo

@samayoページロード時や印刷ボタンクリック時にエラーは発生しません。 – rajesh

多分それは 'document.write'のあなたの使用ですあなたはあなたの答えのために – samayo

let divContents = $("#exportDiv").html();

これは問題です。 Chart.jsはチャートにhtml5キャンバスを使用します。したがって、divContentにはキャンバスタグだけが含まれます。

は、私はアニメーションが完了したとき、それは最初の画像にグラフを変換することによって取り組んだし、私がイメージタグで画像を表示...そして、それは印刷プレビュー画面上に現れ.toDataURL()

出典

2018-01-13 13:47:40

おかげでありがとう、そして私の遅い応答のために残念...しかし、私は周りに働いて、働いて、感謝を再び得ました... – rajesh

@rajeshこれに対するあなたの解決策は何でしたか？同じような発行で実行する – overboard182

@ overboard182私は私のソリューションを掲載しています。 – rajesh

を試してみてください...

は、最初私は機能を作成し、その後のdiv

<div class="col-sm-6"> 
     <img id="url" /> 
    </div>

を作成

function done(){ 
    var url=chart.toBase64Image(); 
    document.getElementById("url").src=url; 
}

はその後、私のチャートオプションで

animation: { 
    onComplete: done 
},

は、それがチャートの画像を作成し、私が作ったCSSを使用して「URL」私の場合には、必要なdivの中にそれを配置図表非表示とdiv要素を含むdiv要素含まれるチャート画像が表示されます。

出典

2018-01-24 17:53:16 rajesh

詳しい情報を追加するには、あなたの質問に編集リンクを使用してください。回答を投稿するボタンは、質問に対する完全な回答のためだけに使用してください。 - [レビューから]（/レビュー/低品質の投稿/ 18615767） – joppiesaus

これは質問に対する回答ではありません。批評をしたり、著者の説明を求めるには、投稿の下にコメントを残してください。 - [レビューから]（/レビュー/低品質の投稿/ 18615767） –

@rajeshこれを更新していただきありがとうございます。私自身の解決策も出てきて終わりましたが、これは私を助けました:) – overboard182

vue chart jsが印刷プレビューに表示されない

答えて

関連する問題