• Vue前端打印print设置自定义参数


    1. 安装组件

    npm install print-js --save

    2.引入组件

    import print from "print-js";

    3. 使用组件,(这里使用的是局部引入)

    1. <template>
    2. <div id="printid">显示的内容div>
    3. <div @click="bindPrint">打印div>
    4. template>
    5. <script>
    6. import print from "print-js"
    7. export default {
    8. data () {
    9. return {
    10. }
    11. },
    12. methods:{
    13. bindPrint( () => {
    14. print({
    15. printable: "printid",
    16. type:'html',
    17. header:null,
    18. targetStyles:['*'],
    19. style:"@page {margin:0 10mm}"
    20. })
    21. })
    22. }
    23. }
    24. script>

    print-js 参数配置

    参数类型说明可选值默认值
    printableString、Objectpdf或图像url、html元素id或json数据对象。nullnull
    typeString打印的类型pdf, html, image, json and raw-htmlpdf'
    headerString、Boolean用于HTML、图像或JSON打印的可选标题。它将被放置在页面的顶部。此属性将接受文本或原始HTML。nulltrue
    headerStyleString要应用于标题文本的可选标题样式null'font-weight: 300;'
    maxWidthNumber最大文档宽度(以像素为单位)。根据需要更改此项。打印HTML、图像或JSON时使用。null800
    cssString这允许我们传递一个或多个css文件URL,这些URL应应用于正在打印的html。值可以是具有单个URL的字符串,也可以是具有多个URL的数组。nullnull
    styleString这允许我们传递一个自定义样式的字符串,该字符串应用于正在打印的html。nullnull
    scanStylesBoolean设置为false时,库不会处理应用于正在打印的html的样式。使用css参数时非常有用。true, falsetrue
    targetStyleString默认情况下,打印HTML元素时,库仅处理某些样式。此选项允许您传递要处理的样式数组。示例: ['padding-top', 'border-bottom']nullnull
    targetStyles

    但是,与“targetStyle”相同,这将处理一系列样式中的任何样式。例如:['border', 'padding'],将包括'border-bottom', 'border-top', 'border-left', 'border-right', 'padding-top'等。也可以传递['*']来处理所有样式。

    nullnull
    ignoreElementsArray接受打印父html元素时应忽略的html ID数组。null[ ]
    propertiesString打印JSON时使用。这些是对象属性名称。nullnull
    gridHeaderStyleString打印JSON数据时网格标题的可选样式。null'font-weight: bold;'
    gridStyleString打印JSON数据时网格行的可选样式。null'border: 1px solid lightgray; margin-bottom: -1px;'
    repeatTableHeaderBoolean打印JSON数据时使用。设置为false时,数据表标题将仅显示在第一页中。true,falsetrue
    showModal启用此选项可在检索或处理大型PDF文件时显示用户反馈。nullnull
    modalMessageStringshowModal设置为true时向用户显示的消息。null'Retrieving Document...'
    onLoadingStartfunction加载PDF时要执行的函数nullnull
    onLoadingEndfunction加载PDF后要执行的函数nullnull
    documentTitleString打印html、图像或json时,这将显示为文档标题。nullnull
    fallbackPrintable

    打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档,而不是传递到“可打印”中的原始pdf文档。如果在备用pdf文件中插入javascript,这可能很有用。

    nullnull
    onPdfOpen

    打印pdf时,如果浏览器不兼容(请检查浏览器兼容性表),库将在新选项卡中打开pdf。可以在此处传递回调函数,发生这种情况时将执行回调函数。在某些情况下,如果您希望处理打印流、更新用户界面等,它可能会很有用。

    nullnull
    onPrintDialogClose浏览器打印对话框关闭后执行回调函数。nullnull
    base64Boolean打印作为base64数据传递的PDF文档时使用。true,falsefalse

  • 相关阅读:
    JavaScript中的四种枚举方式
    ZStack出品|制造业专属的VMware迁移方案长啥样?
    推荐3款小众软件,可以满足一些奇怪的需求
    基于STM32G431嵌入式学习笔记——九、IIC总线(一)EEPROM
    使用免费开源的Odoo CRM如何有效的获取潜在客户线索的经验分享
    数据驭王: PostgreSQL教程指南解密
    ARM-V9 RME(Realm Management Extension)系统架构之系统能力的内存隔离和保护
    Hbase 面试题(六)
    【计算机网络Part 1】概述+物理层
    Redis入门:Redis持久化策略RDB&AOF简介
  • 原文地址:https://blog.csdn.net/QQ675396947/article/details/126412093