Vue - 下载打印功能,将页面下载打印为 pdf 格式文件(vue-print-nb)

Vue 使用 vue-print-nb 插件实现打印功能

  • 一. vue-print-nb 的使用
    • 1.1 安装 vue-print-nb
    • 1.2. 引入vue-print-nb
  • 二. 一个打印实例

使用文档:https://www.npmjs.com/package/vue-print-nb

一. vue-print-nb 的使用

1.1 安装 vue-print-nb

npm install vue-print-nb --save

1.2. 引入vue-print-nb

  1. main.js 中全局引入

    import Print from 'vue-print-nb'
    Vue.use(Print);
    
  2. 组件中 引入使用

    import print from "vue-print-nb";
    export default {
      directives: {
        print,
      },
    };
    
  3. 使用 vue-print-nb 打印页面

    (1) 打印整个页面

    <button v-print>Print the entire pagebutton>
    

    (2) 打印范围内页面
    v-print 指定打印范围的 id 选择器

    <div id="printMe">
      <p>葫芦娃,葫芦娃p>
      <p>一根藤上七朵花p>
      <p>小小树藤是我家 啦啦啦啦p>
      <p>叮当当咚咚当当 浇不大p>
      <p>叮当当咚咚当当 是我家p>
      <p>啦啦啦啦p>
      <p>...p>
    div>
    <button v-print="'#printMe'">开始打印button>
    

    (3) 打印范围内页面,并设置打印配置

    HTML

    <div id="printMe">
      <p>葫芦娃,葫芦娃p>
      <p>一根藤上七朵花p>
      <p>小小树藤是我家 啦啦啦啦p>
      <p>叮当当咚咚当当 浇不大p>
      <p>叮当当咚咚当当 是我家p>
      <p>啦啦啦啦p>
      <p>...p>
    div>
    <button v-print="printObj">开始打印button>
    

    JavaScript

    export default {
      data() {
        return {
          printObj: {
            id: "printMe",//必填项,需部分打印输入的ID
            popTitle: "一个打印文件",//标题显示标题
            extraCss: "https://www.google.com,https://www.google.com",//附加链接连接,以逗号分隔
            extraHead: '',//附加到head标签的附加标签,以逗号分隔
          },
        };
      },
    };
    

二. 一个打印实例

<template>
  <div>
    <div id="printMe" style="background: red">
      <p>葫芦娃,葫芦娃p>
      <p>一根藤上七朵花p>
      <p>小小树藤是我家 啦啦啦啦p>
      <p>叮当当咚咚当当 浇不大p>
      <p>叮当当咚咚当当 是我家p>
      <p>啦啦啦啦p>
      <p>...p>
    div>
    
    <button v-print="printObj">Print local rangebutton>
  div>
template>

<script>
/**1.安装vue-print-nb */
//npm install vue-print-nb --save
/**2.引入vue-print-nb */
import print from "vue-print-nb";
export default {
  directives: {
    print,
  },
  data() {
    return {
      printObj: {
        id: "printMe",//必填,需部分打印输入的ID
        popTitle: "一个打印文件",//标题显示标题
        extraCss: "https://www.google.com,https://www.google.com",//附加链接连接,以逗号分隔
        extraHead: '',//附加到head标签的附加标签,以逗号分隔
      },
    };
  },
};
script>

<style scoped>
style>

你可能感兴趣的:(#,Vue__插件,依赖的使用,vue)