vue印刷

vueメソッド
1つ目の方法:npmでプラグインをインストールする
1.npm install vue-print-nb--save 2をインストールする.導入インストール後main.jsファイルへの導入

import Print from 'vue-print-nb'
Vue.use(Print);  //  

3.今すぐ使える

コンテンツの印刷が不完全な場合は、印刷操作時により多くの設定をクリックし、スケール検証を設定します.vue-print-nbはいくつかのブラウザを使用してクリックしても効果がありません(なぜか分かりません).
2つ目の方法:プラグインをローカルに手動でダウンロードする
プラグインアドレス:https://github.com/xyl66/vuePlugs_printjs

import Print from '@/plugs/print'
Vue.use(Print) //   

this.$print(this.$refs.print) //   

注意事項refでdomノードを取得する必要があり、idまたはclassで直接取得するとwebpackパッケージ配置後の印刷内容が空で印刷しない領域を指定する方法1.No-printスタイルクラスの追加

方法2.カスタムクラス名

     
this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) //   

未試験:print.js 、vue-easy-print
jqueryメソッド
jquery-print.js
1、index.html導入

2、webpack.base.conf.js

externals: {
    "vue": "Vue",
    "element-ui": "ELEMENT",
    'jquery':'window.jQuery'
}

:jQueryをグローバル する があります.3、

$("#printObject").print();

jquery.jqprint.js
い は じです.
JAvascriptメソッド
ページ

function printPage(){//         print，    window.print()      
    window.print();
}

: するコードセグメントを「リング」と む

function printArea(){
    var bdHtml=window.document.body.innerHTML;
    var sprnstr="";
    var eprnstr="";
    var prnHtml=bdHtml.substring(bdHtml.indexOf(sprnstr)+17);/*       */
    prnHtml=prnHtml.substring(0, prnHtml.indexOf(eprnstr));/*       */
    var myWindow=window.open('', '', '');/*         （   ）*/
    myWindow.document.body.innerHTML=prnHtml;
    myWindow.print();
}

:CSSの@media print{}は、 のスタイルを するか、 に いてページを します.