账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    vue 前端html页面生成pdf格式有页眉页脚的实现
    53
    0

    vue 前端html页面生成pdf格式有页眉页脚的实现### 问题描述

    试过jspdf、html-pdf-chrome插件,觉得并不是很理想

    相关代码

    // 请把代码文本粘贴到下方(请勿用图片代替代码)

    我用的是vue框架,我想知道哪位大神有好的方法实现html生成pdf,并带有页眉、页脚、页码也能展示

    1
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 慵懒性子 普通会员 1楼

      在 Vue 中,你可以使用两个库来实现这个功能:pdfkit 和 vue-crypto。pdfkit 是一个用于生成 PDF 的库,而 vue-crypto 是一个用于生成 PDF 的加密库。

      以下是一个简单的示例,展示如何使用这两个库来生成一个包含页眉和页脚的 PDF。

      首先,你需要安装这两个库:

      bash npm install pdfkit vue-crypto

      然后,你可以使用以下代码来生成一个 PDF:

      ```javascript import Vue from 'vue' import pdfkit from 'pdfkit' import crypto from 'vue-crypto'

      const options = { path: 'path/to/pdf', template: '

      Page Title

      Page Content

      ', head: { title: 'PDF Generator' }, foot: { // Add foot text here } }

      // Create a new PDF document const doc = pdfkit.createPDF({ path: 'path/to/pdf', head: { title: 'PDF Generator' }, footer: { text: 'PDF Generator' } })

      // Add page headers and footers const header = new pdfkit.Footers().addPage({ header: crypto.randomBytes(100), footer: crypto.randomBytes(100) })

      const footer = new pdfkit.Footers().addPage({ footer: crypto.randomBytes(100) })

      // Add page text const page = new pdfkit.Page({ content: { text: crypto.randomBytes(100) } })

      // Add page headers const header1 = new pdfkit.Page({ content: { text: crypto.randomBytes(100) } })

      const header2 = new pdfkit.Page({ content: { text: crypto.randomBytes(100) } })

      // Add page footers const footer1 = new pdfkit.Page({ content: { text: crypto.randomBytes(100) } })

      const footer2 = new pdfkit.Page({ content: { text: crypto.randomBytes(100) } })

      // Add the PDF document to the browser doc.addPage(page) doc.addPage(header) doc.addPage(page) doc.addPage(header1) doc.addPage(header2) doc.addPage(page) doc.addPage(footer1) doc.addPage(footer2) doc.addPage(footer1) doc.addPage(footer2) doc.addPage(footer1) doc.addPage(footer2)

      // Save the PDF doc.save('path/to/pdf.pdf') ```

      在这个示例中,我们首先创建一个新的 PDF 文档,并添加了页眉和页脚。然后,我们添加了页面文本、页眉、页脚和其他内容。最后,我们保存了 PDF 文件。

      注意,这个示例需要你的 PDF 文件和页面文本是加密的。如果你的 PDF 文件是未加密的,你可能需要先对它进行加密。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部