前台导出pdf经验汇总 (html2canvas.js和浏览器自带的打印功能-print.js)以及后台一些导出pdf的方法

一、前台导出pdf的两种方式

1. html2canvas.js & pdf.js

简介

我们可以直接在浏览器端使用html2canvas,对整个或局部页面进行‘截图’。但这并不是真的截图,而是通过遍历页面DOM结构,收集所有元素信息及相应样式,渲染出canvas image。

由于html2canvas只能将它能处理的生成canvas image,因此渲染出来的结果并不是100%与原来一致。但它不需要服务器参与,整个图片都由客户端浏览器生成,使用很方便。

使用

先下载html2canvas.jsjspdf插件:

yarn add html2canvas
npm install --save html2canvas
 

yarn add jspdf
npm install jspdf --save

使用的API也很简洁,下面代码可以将某个元素渲染成canvas:

html2canvas(element, {
    onrendered: function(canvas) {
       document.body.appendChild(canvas);
    }
});

当然了,这是个非常简单的html转成pdf的js方法。

问题及解决方法

如果我们想要输出多页pdf,需要清晰度更高的,同时内容不被截断的改怎么办呢?

  1. 输出多页pdf
// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
       // 导出之前先将滚动条置顶,不然会出现数据不全的现象
        window.pageYOffset = 0
       document.documentElement.scrollTop = 0
        document.body.scrollTop = 0
        var element = document.getElementById('pdfCentent')
        element.style.background = '#FFFFFF'
        html2canvas(element, {
         logging: false,
         dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
         scale: 4, // 按比例增加分辨率
         element: element,
         backgroundColor: '#ffffff',
         allowTaint: true,
        useCORS: true
       }).then(function (canvas) {
         var pdf = new JSPDF('p', 'mm', 'a4') // A4纸,纵向
         pdf.setFontSize(30) // 字体大小
         // pdf.text(20, 30, pdf)
         var ctx = canvas.getContext('2d')
         var a4w = 170; var a4h = 257 // A4大小,210mm x 297mm,四边各保留20mm的边距,显示区域170x257
         var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
         var renderedHeight = 0
        var options = { pagesplit: true }

         while (renderedHeight < canvas.height) {
           var page = document.createElement('canvas')
           page.width = canvas.width
           page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

           // 用getImageData剪裁指定区域,并画到前面创建的canvas对象中
           page.getContext('2d').putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
           pdf.addImage(page.toDataURL('image/jpeg', 1.0), 'JPEG', 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面,保留10mm边距

           renderedHeight += imgHeight
           if (renderedHeight < canvas.height) { pdf.addPage(element, options, function () {}) }// 如果后面还有内容,添加一个空页
           // delete page;
         }
         pdf.save(htmlTitle + currentTime)
       })
    }
  }
}

2.清晰度更高:

// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
       // 清晰度更高
       var downPdf = document.getElementById('pdfCentent')
       html2canvas(downPdf, {
            logging: false,
           //  dpi: 172,
            dpi: window.devicePixelRatio * 4, // 将分辨率提高到特定的DPI 提高四倍
            scale: 4 // 按比例增加分辨率
                    }).then(function (canvas) {
                      console.log('canvas: ', canvas)
                         var contentWidth = canvas.width
                         var contentHeight = canvas.height

                         // 一页pdf显示html页面生成的canvas高度;
                         var pageHeight = contentWidth / 592.28 * 841.89
                         // 未生成pdf的html页面高度
                        var leftHeight = contentHeight
                         // pdf页面偏移
                         var position = 0
                         // html页面生成的canvas在pdf中图片的宽高(a4纸的尺寸[595.28,841.89])
                         var imgWidth = 595.28
                         var imgHeight = 592.28 / contentWidth * contentHeight

                        var pageData = canvas.toDataURL('image/jpeg', 1.0)
                         var pdf = new JSPDF('', 'pt', 'a4')

                         // 有两个高度需要区分,一个是html页面的实际高度,和生成pdf的页面高度(841.89)
                        // 当内容未超过pdf一页显示的范围,无需分页
                         if (leftHeight < pageHeight) {
                            pdf.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
                         } else {
                             while (leftHeight > 0) {
                                 pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
                                 leftHeight -= pageHeight
                                 position -= 841.89
                                 // 避免添加空白页
                                 if (leftHeight > 0) {
                                     pdf.addPage()
                                 }
                             }
                         }
                         pdf.save(htmlTitle + currentTime)
                         // 背景设为白色(默认为黑色)
                         // background: '#fff'
                    })
    }
  }
}

3.内容不被截断,也就是把所有的内容放一页:

// // 导出页面为PDF格式
import html2canvas from 'html2canvas'
import JSPDF from 'jspdf'
export default {
  install (Vue, options) {
    Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
       // -------------输出pdf为一页,解决分页内容截断问题,单在pdf打印时会出错-------------
      var mainRight = document.getElementById('pdfCentent')
            html2canvas(mainRight, {
              allowTaint: true,
              scale: 2 // 提升画面质量,但是会增加文件大小
            }).then(function (canvas) {
  var contentWidth = canvas.width
  var contentHeight = canvas.height

  var pageData = canvas.toDataURL('image/jpeg', 0.4)

  var pdfWidth = (contentWidth + 10) / 2 * 0.75
  var pdfHeight = (contentHeight + 200) / 2 * 0.75 // 500为底部留白

  var imgWidth = pdfWidth
  var imgHeight = (contentHeight / 2 * 0.75) // 内容图片这里不需要留白的距离

  var pdf = new JSPDF('', 'pt', [pdfWidth, pdfHeight])
  pdf.addImage(pageData, 'jpeg', 0, 0, imgWidth, imgHeight)
  // pdf.save('report_pdf_' + new Date().getTime() + '.pdf')
  pdf.save(htmlTitle + currentTime)
})
    }
  }
}

问题:
使用这个插件固然可以将html转换成pdf输出,但是原理是将html先转换成canvas图片,然后将图片转成pdf,这样图片的清晰度不高,同时存在内容被截断的情况,虽然可以通过修改js文件来判断是否截断内容,但是设计的文本内容比较多,例如:表格、文本、图片、图表等,不好判断。
于是采用下面的方法实现前台导出pdf,利用print.js

2. 浏览器自带的打印功能 & print.js

简介

浏览器自带的打印功能也可以输出pdf,图证如下:
在这里插入图片描述

使用

两种引入方式:
1.引入安装vue-print.js

cnpm i vue-printjs --save-dev

2.下载print.js包:
https://github.com/zxc19890923/print/blob/master/print.js
使用方法
1.main.js中引入插件

import Print from './plugins/print/Print'
Vue.use(Print)

2.vue项目中使用:

<!--
 * @Autor: Sugar_W
 * @Date: 2020-11-24 19:01:10
 * @LastEditors: Sugar_W
 * @LastEditTime: 2020-11-24 19:55:32
 * @Description: Still waters run deep!
 * @FilePath: \CPSWeb\src\views\report\ReportTest.vue
-->
<template>
  <div>
    <template>
      <div ref="print" class="app-container" id="print">
        <p>
          qhfqihbfhubqshufbuqhwbufbqwuvfbugsdghjcbhjasbvfgyugqwetyggdfytgqwvgtgyufvbaswdguyhfb
        </p>
        <a-button type="primary" class="button" @click="printContext">
          查询
        </a-button>
      </div>
    </template>

  </div>
</template>

<script>

export default {
  methods: {
    // 打印
    printContext () {
      this.$print(this.$refs.print)
    }
    // 不打印方法1. 添加no-print样式类
    // 不打印方法2. this.$print(this.$refs.print,{'no-print':'.do-not-print-div'})
  }
}
</script>

问题及解决方法

这个插件用的人比较少,所以我在项目中遇见的问题还是比较多的,下面就一一解决。程序员就是解决问题的,QAQ
1、如果项目需要多页pdf,那么肯定需要分页,首先确定好,每一页的大小,去适配你的界面,因为每个人的需求不一样,大小也不一样,下面放我设置的大小:

// 报告右侧块样式
.reportBlock{
  border-radius: 2px;
  border:1px solid;
  border-color:#dcdddd;
  width:731px;
  height:1024px;
  clear: both;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
  margin-left: 0px;
  margin-bottom: 20px;
}

2、每页大小确定了,那么就需要实现分页了,这里用到一个css样式:

page-break-after: always; // 实现分页的重要一步

整个代码就是:

// 报告右侧块样式
.reportBlock{
  border-radius: 2px;
  border:1px solid;
  border-color:#dcdddd;
  width:731px;
  height:1024px;
  clear: both;
  margin: 0 auto;
  position: relative;
  margin-top: 20px;
  margin-left: 0px;
  margin-bottom: 20px;
  page-break-after: always; // 实现分页的重要一步
}

3、既然有了分页,自然也就需要滚动条,总不至于使用浏览器自带的滚动条,那么影响整个系统使用。再者,如果界面内容使用滚动条,出现滚动条也是不美观的,特别对于我们前端开发人员来说,非常碍眼。我们可以利用两个div块来实现:

.rightBlock{
  overflow: hidden;
  width: 840px;
  height: 750px;
  }

第一个div块里是空的,设置宽度较小,目的是挡住第二个div的滚动条;

.printBlock{
  width: 860px;
  height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}

第二个div块里放置我们需要展示的内容,设置可滚动,然后设置宽度大于第一div宽度。
这样就实现既有滚动条又隐藏起来啦。
这里要注意不能使用这个css属性:

min-height:666px;max-height:666px;overflowY:scroll;

这个css样式会导致分页失败哟!

4、在弹出打印预览的时候,会发现出现页眉页脚,这就需要去除。使用如下代码:

// 去除页眉页脚
#print{
  @page {
      margin: 0; /* this affects the margin in the printer settings */
    }
    }

这里的print就是对应的你想输出pdf的div块。

5、在出现需要空白的地方,比如第一页,我们第一个想到的是不是加个矩形框,但是事实证明这是失败的。需要使用css外边框属性,类似:margin-top。而不是另外加div框。

6、如果你的项目使用了echarts图表直接浏览器打印显示不出来,因为print.js本身是不支持canvas转成图片的功能的,需要将echarts的转成图片,提前把canvas图表转成图片,这里使用自己写的代码,记得这里的代码是在刚刚引入的main.jsprint.js中:
在这里插入图片描述

var canvass = document.querySelectorAll('canvas');

在这里插入图片描述

//canvass echars图表转为图片
    for (var k4 = 0; k4 < canvass.length; k4++) {
      var imageURL = canvass[k4].toDataURL("image/png");
      var img = document.createElement("img");
      img.src = imageURL;
      img.setAttribute('style', 'max-width: 100%;');
      img.className = 'isNeedRemove'
      // canvass[k4].style.display = 'none'
      // canvass[k4].parentNode.style.width = '100%'
      // canvass[k4].parentNode.style.textAlign = 'center'
      canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
    }

print.js中还写了分页的函数:
在这里插入图片描述

//做分页
    //style="page-break-after: always"
    var pages = document.querySelectorAll('.result');
    for (var k5 = 0; k5 < pages.length; k5++) {
      pages[k5].setAttribute('style', 'page-break-after: always');
    }
    return this.dom.outerHTML;

在这里插入图片描述

writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:' + document.querySelector('.results').clientWidth + 'px;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
 
    var removes = document.querySelectorAll('.isNeedRemove');
    for (var k = 0; k < removes.length; k++) {
      removes[k].parentNode.removeChild(removes[k]);
    }
 
    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

担心你们找不到位置就截图把需要添加的地方标出来,然后代码紧接着放在地下,供你们复制喔。毕竟大家都是面向CV编程嘛,QAQ
但是有的小伙伴说,这一个个找的太费力了,我就想直接CV,好的满足你,下面自取喔:

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);
 
  this.options = this.extend({
    'noPrint': '.no-print'
  }, options);
 
  if ((typeof dom) === "string") {
    this.dom = document.querySelector(dom);
  } else {
    this.isDOM(dom)
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }
 
  this.init();
};
Print.prototype = {
  init: function () {
    var content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },
 
  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "<style>" + (this.options.notPrint ? this.options.notPrint : '.no-print') + "{display:none;}</style>";
    str += "<style>.results{width:100%!important;} .result .title{width:100%;}</style>";
 
    return str;
  },
 
  getHtml: function () {
    var inputs = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('textarea');
    var selects = document.querySelectorAll('select');
    var canvass = document.querySelectorAll('canvas');
    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', "checked")
        } else {
          inputs[k].removeAttribute('checked')
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute('value', inputs[k].value)
      } else {
        inputs[k].setAttribute('value', inputs[k].value)
      }
    }
 
    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value
      }
    }
 
    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', "selected")
            } else {
              child[i].removeAttribute('selected')
            }
          }
        }
      }
    }
    //canvass echars图表转为图片
    for (var k4 = 0; k4 < canvass.length; k4++) {
      var imageURL = canvass[k4].toDataURL("image/png");
      var img = document.createElement("img");
      img.src = imageURL;
      img.setAttribute('style', 'max-width: 100%;');
      img.className = 'isNeedRemove'
      // canvass[k4].style.display = 'none'
      // canvass[k4].parentNode.style.width = '100%'
      // canvass[k4].parentNode.style.textAlign = 'center'
      canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
    }
    //做分页
    //style="page-break-after: always"
    var pages = document.querySelectorAll('.result');
    for (var k5 = 0; k5 < pages.length; k5++) {
      pages[k5].setAttribute('style', 'page-break-after: always');
    }
    return this.dom.outerHTML;
  },
 
  writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:' + document.querySelector('.results').clientWidth + 'px;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
 
    var removes = document.querySelectorAll('.isNeedRemove');
    for (var k = 0; k < removes.length; k++) {
      removes[k].parentNode.removeChild(removes[k]);
    }
 
    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },
 
  toPrint: function (frameWindow) {
    try {
      setTimeout(function () {
        frameWindow.focus();
        try {
          if (!frameWindow.document.execCommand('print', false, null)) {
            frameWindow.print();
          }
        } catch (e) {
          frameWindow.print();
        }
        frameWindow.close();
      }, 10);
    } catch (err) {
      console.log('err', err);
    }
  },
  isDOM: (typeof HTMLElement === 'object') ?
    function (obj) {
      return obj instanceof HTMLElement;
    } :
    function (obj) {
      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 4. 添加实例方法
  Vue.prototype.$print = Print
}
export default MyPlugin

7、有时候预览的时候会出现中间突然多一页空白页,这可能是你用的组件出了问题,比如说我用的vuecard,封装好的自带内边距padding:24px,这个会导致的。
两个解决办法:
1、如果你的card都想改,或者你引用的某个组件,更改内联样式不影响其他的,你可以使用vue的深度内联deep来更改:

/deep/.ant-transfer-list-header{
  background: #01ada8;
}

类似这样的,具体更改card的我没用,这个号小问题对于各位看官来说问题不大,自己解决咯。
2、将card改成div就好啦。

总结
前台输出pdf就到这了,可能还有问题没写在里面,以后遇见还会更新。也欢迎大家有问题提问,共同进步。

3. vue-print-nb

1. 安装vue-print-nb

没有什么前提要求,直接安装即可,但因为Vue2.0和Vue3.0有着不同的用法,因此需要安装的版本也不同,各位看官自行取舍。

Vue2.0版本安装方法:

npm install vue-print-nb --save

Vue3.0版本安装方法:

npm install vue3-print-nb --save

2. 引入Vue项目

Vue2.0引入方式:

// 1. 全局挂载
import Print from 'vue-print-nb'
Vue.use(Print)

// or

// 2. 自定义指令
import print from 'vue-print-nb'
directives: {
  print
}

Vue3.0引入方式:

// 1. 全局挂载
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

// or 

// 2. 自定义指令
import print from 'vue3-print-nb'

directives: {
    print   
}

3. 参数说明

参数作用类型可选项默认值
id局部打印有效,标识符String‘printId’
standard局部打印有效,打印的文本类型StringHTML5/loose/strictHTML5
extraHead局部打印有效,添加在打印区域的最顶端String
extraCss局部打印有效,为打印区域提供Stylesheet样式表String
popTitle局部打印有效,编辑页眉的标题StringDocument Title
clickMounted全局有效,调用v-print绑定的按钮点击事件callbackFunctionthis.Object
openCallback全局有效,调用打印时的callbackFunctionthis.Object
closeCallback全局有效,调用关闭打印的callback(无法区分确认or取消)Functionthis.Object
beforeOpenCallback全局有效,调用开始打印之前的callbackFunctionthis.Object
preview全局有效,控制打印预览Booleantrue/falsefalse
previewTitle编辑预览页面的预览标题String‘打印预览’
previewPrintBtnLabel编辑预览页面的打印按钮文本String‘打印’
previewBeforeOpenCallback调用打开预览页面之前的callbackFunctionthis.Object
previewOpenCallback调用打开预览页面之后的callbackFunctionthis.Object
url非局部打印有效,打印指定的URL,确保同源策略相同String
asyncUrl非局部打印有效,异步加载打印指定的URL,确保同源策略相同Function
zIndex预览有效,预览窗口的z-index,默认是20002,最好比默认值更高String,Number20002

4. 应用

template示例:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    // 局部打印文本以及按钮
    <div id="printArea">Print Area</div>
    <button v-print="print">Print!</button>
    <ul>
      <li>
        <a
          href="https://vuejs.org"
          target="_blank"
        >
          Core Docs
        </a>
      </li>
      <li>
        <a
          href="https://forum.vuejs.org"
          target="_blank"
        >
          Forum
        </a>
      </li>
      <li>
        <a
          href="https://chat.vuejs.org"
          target="_blank"
        >
          Community Chat
        </a>
      </li>
      <li>
        <a
          href="https://twitter.com/vuejs"
          target="_blank"
        >
          Twitter
        </a>
      </li>
      <br>
      <li>
        <a
          href="http://vuejs-templates.github.io/webpack/"
          target="_blank"
        >
          Docs for This Template
        </a>
      </li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li>
        <a
          href="http://router.vuejs.org/"
          target="_blank"
        >
          vue-router
        </a>
      </li>
      <li>
        <a
          href="http://vuex.vuejs.org/"
          target="_blank"
        >
          vuex
        </a>
      </li>
      <li>
        <a
          href="http://vue-loader.vuejs.org/"
          target="_blank"
        >
          vue-loader
        </a>
      </li>
      <li>
        <a
          href="https://github.com/vuejs/awesome-vue"
          target="_blank"
        >
          awesome-vue
        </a>
      </li>
    </ul>
  </div>
</template>

script示例:

export default {
  name: 'HelloWorld',
  data () {
    let that = this
    return {
      msg: 'Welcome to Your Vue.js App',
      print: {
        id: 'printArea',
        popTitle: '配置页眉标题', // 打印配置页上方的标题
        extraHead: '打印', // 最上方的头部文字,附加在head标签上的额外标签,使用逗号分割
        preview: true, // 是否启动预览模式,默认是false
        previewTitle: '预览的标题', // 打印预览的标题
        previewPrintBtnLabel: '预览结束,开始打印', // 打印预览的标题下方的按钮文本,点击可进入打印
        zIndex: 20002, // 预览窗口的z-index,默认是20002,最好比默认值更高
        previewBeforeOpenCallback () { console.log('正在加载预览窗口!'); console.log(that.msg, this) }, // 预览窗口打开之前的callback
        previewOpenCallback () { console.log('已经加载完预览窗口,预览打开了!') }, // 预览窗口打开时的callback
        beforeOpenCallback () { console.log('开始打印之前!') }, // 开始打印之前的callback
        openCallback () { console.log('执行打印了!') }, // 调用打印时的callback
        closeCallback () { console.log('关闭了打印工具!') }, // 关闭打印的callback(无法区分确认or取消)
        clickMounted () { console.log('点击v-print绑定的按钮了!') },
        // url: 'http://localhost:8080/', // 打印指定的URL,确保同源策略相同
        // asyncUrl (reslove) {
        //   setTimeout(() => {
        //     reslove('http://localhost:8080/')
        //   }, 2000)
        // },
        standard: '',
        extarCss: ''
      }
    }
  }
}

5. 注意点

Callback函数中this指向当前print object对象,that返回Vue对象;
不需要页眉页脚可以在打印弹窗页面的更多设置里面取消选择;
不设置popTitle参数页眉标题为undifined;
popTitle参数为空时,页眉标题默认为Document Title。

二、后台输出pdf

1. 利用iText导出

因为我使用的前台导出,当时也看了后台,因为项目中有很多复杂图表,后台实现不了,所以放弃这个途径。小伙伴在抉择的时候也要注意哦。
下面放上几个当时我看的几篇博客,希望对大家有帮助!
1、iText5实现Java生成PDF文件完整版
2、iText5官方系列教程-iText in Action(一)
3、【iText5 生成PDF】纯Java代码实现生成PDF(自定义表格、文本水印、单元格样式)
设计到前后台文件流传输的文章:
1、PDF功能实现1——Java实现动态页面在后台生成PDF文件
2、自动把动态的jsp页面(或静态html)生成PDF文档,并且上传至服务器
3、前端接受后端文件流并下载到本地的方法
4、后台返回文件流,前端实现预览pdf

将网页内容导出PDF可以通过多种方法实现,其中一种常见的做法是使用JavaScript结合浏览器的内置打印功能。下面是一种可能的实现方式: 1. 使用JavaScript的`window.print()`方法:这个方法会触发浏览器打印对话框,用户可以通过对话框选择“保存为PDF”或者直接打印到支持PDF打印机。这个方法比较简单,但不支持自定义PDF的布局和样式。 2. 使用Web API导出PDF:现代浏览器提供了Web API来直接生成PDF,例如`html2canvas`结合`jsPDF`库可以将网页中的HTML元素转换为图片然后保存为PDF。这为定制化PDF生成提供了可能,例如可以调整PDF的大小、布局等。 3. 利用服务器端转换:当客户端方法不足以满足需求时,可以考虑服务器端解决方案。服务器接收网页内容的请求,然后使用如wkhtmltopdf这样的工具将HTML转换为PDF。这种方法的优点是可以使用服务器的计算能力来生成复杂或者定制的PDF文档。 示例代码(使用html2canvasjsPDF): ```javascript // 假设有一个按钮,用户点击时触发导出PDF的操作 document.getElementById('exportButton').addEventListener('click', function() { // 获取需要转换为PDF的部分 var element = document.getElementById('contentToPrint'); // 使用html2canvasHTML元素转换为canvas html2canvas(element).then(canvas => { // 创建jsPDF实例 var pdf = new jsPDF(); // 将canvas的内容添加到PDFpdf.addImage(canvas.toDataURL('image/png'), 'PNG', 10, 10); // 保存PDF文件 pdf.save('download.pdf'); }); }); ``` 在上述代码中,首先监听一个按钮的点击事件,然后使用`html2canvas`库将指定的HTML元素(如id为`contentToPrint`的元素)转换为一个canvas对象。之后创建一个jsPDF实例,将canvas的内容作为图片添加到PDF中,并最终生成名为`download.pdf`的文件供用户下载。
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值