IT俱乐部 JavaScript vue生成pdf文件步骤及pdf分页隔断处理方法

vue生成pdf文件步骤及pdf分页隔断处理方法

发布: 2024年 2月 24日 816阅读

一：PDF生成步骤

1.1 引入所需插件命令

1
2
3
npm install html2canvas  
 
npm install jspdf

1.2 在utils中创建pdf.js文件

pdf.js完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
  function htmlPdf(title, html) {
    html2Canvas(html, {
      allowTaint: false,
      taintTest: false,
      logging: false,
      useCORS: true,
      dpi: window.devicePixelRatio * 1,
      scale: 1 // 按比例增加分辨率
    }).then(canvas => {
      var pdf = new JsPDF('p', 'mm', 'a4'); // A4纸，纵向
      var ctx = canvas.getContext('2d');
      var a4w = 190; var a4h = 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
     var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
      var renderedHeight = 0;
      while (renderedHeight

1.3 html文件

html完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<div>
    <button>点击按钮导出pdf</button>
    <div id="pdf-details" class="pdf-details">
      <h1>div里写需要生成的PDF内容的代码</h1>
      <table border="1" align="center" cellspacing="0" cellpadding="30">
<tbody><tr class="pdf-details">
<th style="width:80px">日期</th>
          <th style="width:100px">姓名</th>
          <th>地址</th>
        </tr>
<tr class="pdf-details">
<td>{{item.date}}</td>
          <td>{{item.name}}</td>
          <td>{{item.address}}</td>
        </tr>
</tbody></table>
</div>
  </div>
 
import htmlPdf from '@/utils/pdf.js';
export default {
  name: 'pdfGenerate',
  data () {
    return {
      tableData: [
        {date: '2016-05-02',name: '王大虎',address: '上海市普陀区金沙江路 111 弄'},
        {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 112 锤'},
        {date: '2016-05-01',name: '王三虎',address: '上海市普陀区金沙江路 113 子'},
        {date: '2016-05-03',name: '王四虎',address: '上海市普陀区金沙江路 114 呢'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 弄'}
      ]
    }
  },
  methods: {
    generate () {
      var TypeName = '生成的PDF';
      // 注意这一句
      htmlPdf(TypeName, document.querySelector('#pdf-details'));
    }
  }
}

1.4 生成演示

二：PDF分页隔断处理

  • 在我们日常开发中生成pdf会遇到内容显示出现隔断问题
  • 接下来我会通过代码来处理这个问题

  • 思路为获取每一行的高度然后根据页高度来计算此行内容是否超出
  • 超出则在上一级兄弟元素添加一个空白块来撑高pad内容

2.1 html代码

  • 需要生成的pdf每一行添加一个相同的class作为标识，此次增加的class为“pdf-details”
  • 调用htmlPdf方法时需要获取class为“pdf-details”的元素传给pdf.js

html完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div>
    <button>点击按钮导出pdf</button>
    <div id="pdf-details">
      <h1 class="pdf-details" style="margin:0;padding:20px">div里写需要生成的PDF内容的代码</h1>
      <div class="pdf-details" style="height:495px">占位</div>
      <table border="1" align="center" cellspacing="0" cellpadding="30">
<tbody><tr class="pdf-details">
<th style="width:80px">日期</th>
<th style="width:100px">姓名</th>
<th>地址</th>
        </tr>
<tr class="pdf-details">
<td>{{item.date}}</td>
<td>{{item.name}}</td>
<td>{{item.address}}</td>
        </tr>
</tbody></table>
</div>
  </div>
 
//引用生成pdf方法
import htmlPdf from '@/utils/pdf.js';
export default {
  name: 'pdfGenerate',
  data () {
    return {
      tableData: [
        {date: '2016-05-02',name: '王大虎',address: '上海市普陀区金沙江路 111 弄'},
        {date: '2016-05-04',name: '王二虎',address: '上海市普陀区金沙江路 112 锤'},
        {date: '2016-05-01',name: '王三虎',address: '上海市普陀区金沙江路 113 子'},
        {date: '2016-05-03',name: '王四虎',address: '上海市普陀区金沙江路 114 呢'},
        {date: '2016-05-03',name: '测试超长隔断',address: '这是汉字但生成时有隔断，我现在要处理他;这是汉字但生成时有隔断，我现在要处理他;'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 弄'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 啊'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 测'},
        {date: '2016-05-03',name: '王没虎',address: '上海市普陀区金沙江路 110 试'}
      ]
    }
  },
  methods: {
    generate () {
      var TypeName = '生成的PDF';
      const lableList = document.getElementsByClassName('pdf-details');   // 注意这一句
      htmlPdf(TypeName, document.querySelector('#pdf-details'), lableList);
    }
  }
}
 
td{
  padding: 20px;
}

2.2 pdf.js文件

  • 首先获取每一行需要生成的元素来进行遍历
  • 根据当前元素以及遍历过的元素总高度来计算出当前元素添加到pdf中是否超出一页
  • 超出则添加一个空白块 代替当前元素 当前元素移动到第二页

pdf.js完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 页面导出为pdf格式 //title表示为下载的标题，html表示document.querySelector('#myPrintHtml')
import html2Canvas from 'html2canvas';
import JsPDF from 'jspdf';
var noTableHeight = 0; //table外的元素高度
function htmlPdf(title, html, lableList, type) {// type传有效值pdf则为横版
  if (lableList) {
    const pageHeight = Math.floor(277 * html.scrollWidth / 190) +20; //计算pdf高度
    for (let i = 0; i  {
    var pdf = new JsPDF('p', 'mm', 'a4'); // A4纸，纵向
    var ctx = canvas.getContext('2d');
    var a4w = type ? 277 : 190; var a4h = type ? 190 : 277; // A4大小，210mm x 297mm，四边各保留10mm的边距，显示区域190x277
    var imgHeight = Math.floor(a4h * canvas.width / a4w); // 按A4显示比例换算一页图像的像素高度
    var renderedHeight = 0;
    while (renderedHeight  pageHeight;
  } else {
    return nodes[index].offsetTop + nodes[index].offsetHeight + noTableHeight  pageHeight;
  }
}
export default htmlPdf;

2.3 效果

总结 

到此这篇关于vue生成pdf文件步骤及pdf分页隔断处理方法的文章就介绍到这了,更多相关vue生成pdf及分页隔断内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章希望大家以后多多支持IT俱乐部！

本文收集自网络，不代表IT俱乐部立场，转载请注明出处。https://www.2it.club/navsub/js/9462.html
173赞
标签:
上一篇
下一篇

相关推荐

联系我们

联系我们

在线咨询: QQ交谈

邮箱: 1120393934@qq.com

工作时间：周一至周五，9:00-17:30，节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们

返回顶部