vueプロジェクトでは、HTMLページの印刷機能。プロジェクトでは、ページのフォームを印刷する必要がある場合があります。
インターネットで印刷コンポーネントvue-print-nbを見つけました
このブログのソースコード：https： //github.com/shengbid/vue-print、印刷コンポーネントのコードのみがあり、これをダウンロードするにはこの関数のみが必要です
https://github.com/shengbid/vue-demo このプロジェクトでは、通常のブログで記述されている一部の関数のコードが配置されています。必要に応じてダウンロードできます。ヘルプが必要な場合は、スターをクリックしてください。
使い方
npmをインストールしますinstallvue-print-nb --save
main.jsファイルに登録します
'vue-print-nb'からPrintをインポートします
Vue.use（Print）;
ページで使用され、印刷する必要のあるコンテナにIDを追加すると、印刷ボタンがこのIDを渡します。
html：
<div id="printMe" style="background:red;">
<p>葫芦娃，葫芦娃</p>
<p>一根藤上七朵花 </p>
<p>小小树藤是我家 啦啦啦啦 </p>
<p>叮当当咚咚当当 浇不大</p>
<p> 叮当当咚咚当当 是我家</p>
<p> 啦啦啦啦</p>
<p>...</p>
<div class="describle">
<el-form :model="form" :rules="rules" ref="from" class="demo-ruleForm">
<el-form-item label="姓名:" prop="name">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="描述:" prop="describle">
<el-input
:disabled="detail"
type="textarea"
:rows="4"
:maxlength="2000"
placeholder=""
v-model="form.describle">
</el-input>
</el-form-item>
</el-form>
</div>
</div>
<button v-print="'#printMe'">Print local range</button>
印刷ボタンをクリックしてページを印刷します
このプラグインの使用中に問題が発生しました。通常の入力タグの内容は問題ありません。textareaテキストフィールドの内容は表示できません。プラグインを確認したところ、作成者が値を使用していることがわかりました。フォームを割り当てるときの値。この種の割り当ては、一部の二重ラベルフォームでは無効であり、変更する必要があります。
PS：新しいバージョンの作者はこの問題を修正しました、そして新しいバージョンを使う学生はそれを無視することができます。
パッケージを直接変更するこの方法はあまり良くありません。他の人があなたのコードをダウンロードした場合は、パッケージも変更する必要があります。したがって、このパッケージを取り出してファイルに入れ、mainで直接参照することをお勧めします。 .js
main.js引用インポート「@ / utils / vue-print-nb /」から印刷
追加
最近、印刷ページのタイトルの設定方法について質問がありました。自分で試してみたところ、以前の方法が未定義であることがわかりました。公式ウェブサイトにアクセスして確認しました。作成者がこのコンポーネントを再度変更したところ、現在はより構成可能になりました。
注：ここで、v-print = "printObj"のprintObjは、export default-> data-> return-> printObjと一致している必要があります。
理由：ボタンは、v-printを直接バインドすることで直接印刷できます。バインドされたprintObjは、次のように、自分でデフォルトのデータセットにバインドされます。印刷する領域のdivのIDのバインド、印刷後に表示されるタイトル、等
渡されるのはオブジェクトです。
印刷コンテンツが多い場合、vue-print-nbを使用すると植字の問題が発生する可能性があります。
最初に画像に変換して印刷する方法は次のとおりです。
<template>
<div>
<div id="printMe" ref="printContent">
<ul class="content">
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
<li>轻轻的我走了，</li>
</ul>
</div>
<el-button type="primary" @click="toImg">转图片打印</el-button>
<el-button v-print="printObj" type="primary">直接打印</el-button>
<img style="margin-top:20px;" :src="img" alt="">
</div>
</template>
<script>
import html2canvas from 'html2canvas' // 转图片打印需要先安装html2Canvas和print-js
import printJS from 'print-js'
export default {
data() {
return {
img: '',
printObj: {
id: 'printMe',
popTitle: '打印',
extraCss: 'https://www.google.com,https://www.google.com',
extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
}
}
},
watch: {
},
created() {
},
methods: {
toImg() { // 转图片打印
html2canvas(this.$refs.printContent, {
backgroundColor: null,
useCORS: true,
windowHeight: document.body.scrollHeight
}).then((canvas) => {
// let url = canvas.toDataURL('image/jpeg', 1.0)
const url = canvas.toDataURL()
this.img = url
printJS({
printable: url,
type: 'image',
documentTitle: '打印图片'
})
console.log(url)
})
}
}
}
</script>
補足内容：しばらく使っていないので、現在のバージョンで問題は発生していません。最近、ブロガーからの質問がいくつかあります。
時間のあるこの2日間を見て、以下にまとめた問題点と解決策をいくつか添付します。写真はもっとあるかもしれませんが、その理由をできるだけ詳しく説明したいと思います。ただ解決策を与えるだけです。
関連するgithupソースコードもできるだけ早く更新されます。スターを歌うことを忘れないでください。
PS：これらの問題はコンポーネントの元のコンポーネントであるため、変更にはコンポーネントのソースコードを変更する必要があります。node_modluesの直下で変更せず、このvue-print-nbインストールパッケージをコピーして、独自のプロジェクトファイルに配置してください。
最初にコピーするときにsrcディレクトリがない場合がありますが、問題ありません。実行後に自動的に生成されます。取り出した後、mian.jsのインポートメソッドを変更してtag_textarea.umdファイルを導入する必要があります。 libの下で
1.空白のページをもう1つ印刷します
使用すると空白のページがもう1つある可能性が非常に高くなります。作成されたiframeには高さ100％の要素があり、画像内の画像はiframe要素であるため、情報と組み合わせたコードを確認します。印刷時に生成されます。
このページでHTML：height 100％を設定しているので、ページを見てください。ページを見ることができます。または、body 100％またはその他の要素である可能性があります。この印刷コンポーネントは、導入したすべてのcssスタイルをコピーするためのものです。設定したスタイルも継承します
解決策は、HTMLの高さを設定し、デフォルトの100％をオーバーライドすることです。
もう一度印刷します。コンテンツを追加しましたが、空白のページはありません。この高さの設定は、印刷されたコンテンツの実際の高さに影響しません。実際に2ページある場合は、2ページになります。
このように、空白ページをもう1つ印刷すると問題が解決します。この方法は、ここでのテストで有効です。すべてのシナリオに適用できるとは限りません。ただし、要素の高さの設定で空白ページがもう1つ問題になる可能性があります。
2.コールバックメソッドは有効になりません
新しいバージョンでコールバックメソッドが追加されました。自分で試してみましたが、効果がありませんでした。コードを確認し、着信コールバックメソッドを呼び出さず、何も返しませんでした。コードに追加してください。
コンポーネントリファレンス：
ページ印刷
ここで修正してファイルを変更します。テストに使用したプロジェクトにはes5文法の翻訳があり、tag_textarea.umdはes5文法であるため、使用できますが、別のvueプロジェクトに配置して、es5文法エラーを導入します。
また、ブロガーのコメントとリマインダーにも非常に感謝しています。ほとんど誤解を招く恐れがあります。プロジェクトがes5文法をサポートしていない場合は、srcの下のファイルをインポートし、print.jsとprintarea.jsの2つのファイルを変更して、あなたがそれを変更した場合のコード。
srcの下のコードが使用されます。必要に応じて、https：//github.com/shengbid/vue-printを参照できます。
3.印刷する必要のないコンテンツを非表示にします
印刷時にすべてのコンテンツを印刷する必要がない場合は、印刷前に印刷する必要のない要素を削除できます。これは特定の方法です。
印刷する必要のない要素を非表示にするために、新しい属性ignoreClassがprint.jsファイルに追加されます
また、printarea.jsを追加し、非表示の要素を削除するメソッドを追加します
コンポーネントを使用する場合は、この要素を渡します
印刷効果
ヘッダーとフッターを削除します
jsまたはvue-print-nbプラグインは、chormeを呼び出して印刷するときに、ヘッダー、フッター、および時間をもたらします。
chormeでは、ヘッダーとフッターを印刷するかどうかを手動で設定できます。手動で印刷したくない場合は、cssコントロールを参照できます。
css：
@page{
size: auto; /* auto is the initial value */
margin: 3mm; /* this affects the margin in the printer settings */
}