相关文章推荐
正直的剪刀  ·  Mysql日期格式聚合统计的方法是什么-Pi ...·  1 年前    · 
爱听歌的土豆  ·  SpringBoot中文件二进制流下载功能A ...·  1 年前    · 
听话的吐司  ·  Genymotion模拟器的使用-CSDN博客·  1 年前    · 
文雅的领结  ·  ICommand Interface ...·  2 年前    · 
精明的领带  ·  git修改提交时间_使用Git,从码云上cl ...·  2 年前    · 
Code  ›  前端生成pdf,jspdf+html2Canvas的使用(vue)开发者社区
前端 pdf html代码 html2canvas
https://cloud.tencent.com/developer/article/1907173
霸气的骆驼
2 年前
作者头像
前端小tips
0 篇文章

前端生成pdf,jspdf+html2Canvas的使用(vue)

原创
前往专栏
腾讯云
开发者社区
文档 意见反馈 控制台
首页
学习
活动
专区
工具
TVP
文章/答案/技术大牛
发布
首页
学习
活动
专区
工具
TVP
返回腾讯云官网
社区首页 > 专栏 > 前端文章小tips > 前端生成pdf,jspdf+html2Canvas的使用(vue)

前端生成pdf,jspdf+html2Canvas的使用(vue)

原创
作者头像
前端小tips
发布 于 2021-11-27 18:44:42
2.4K 0
发布 于 2021-11-27 18:44:42
举报

前端生成pdf的效果不如后端生成的效果好,但也可以生成。

本文主要使用 jspdf+html2Canvas 实现html转pdf。 jspdf不支持中文 ,所以需要配合html2Canvas,先生成图片再转为pdf,就不用考虑中英文问题,但是会存在 分页 和 样式不友好 的问题

一、前期准备

image

1、安装jspdf: npm install jspdf --save

2、安装html2Canvas: npm install --save html2canvas

二、代码

1. html

这里使用 iframe 嵌套需要转成pdf的html文件;

如果pdf内容是动态的,可以将html丢给后端,让后端使用freemarker ftl模板语言或是啥其他的模板语言更改即可,然后将整个html作为字符串传给前端,前端再使用iframe 的 srcdoc属性将内容渲染出来。

image

2. 生成单页

不存在分页内容裂开的情况,但对样式呈现不太友好,有时会出现内容偏移情况,时好时坏的,经过不断的尝试,发生偏移的时候,可以将html2Canvas的width写死,但是值具体是多少,需要你自己猜

// 单页pdf:css高度自适应即可(此处用的一个css,为了实现多页pdf同时不让分页分割图片,css中写死了每页的高度.a4page)
    getOnePdf() {
      var title = "单页报告";
      var dom = document.getElementById("pdf-container");  // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        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 pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
    },

image

3. 生成多页

分页会出现问题:比如图片裂开,表格的某一行从中间断开了等等....我用的笨方法手动去调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight,一点点试出来合适的值(应该有更好的方法,但是技术有限)

// 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
    getManyPdf() {
      let _this = this;
      var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; // 宽高写死,强制分页
        var contentHeight = 5060;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 3400; // 为了分页,所以写死。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) {
            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
        pdf.save(`多页报告}.pdf`);
    }

三、所有代码

  <div class="home-index-container" style="width: 100%; height: 100%; overflow: auto">
    <el-button @click="getOnePdf" type="primary">下载单页</el-button>
    <el-button @click="getManyPdf" type="primary">下载多页</el-button>
    <!-- 转Pdf的容器 -->
    <div id="pdf-container">
      <iframe src="/exportPDF/exportPDF.html" width="1000" height="5200"></iframe>
</template>
<script>
import html2Canvas from "html2canvas";
import JsPDF from "jspdf";
export default {
  data() {
    return {};
  methods: {
    // 单页pdf:css高度自适应即可(此处用的一个css,为了实现多页pdf同时不让分页分割图片,css中写死了每页的高度.a4page)
    getOnePdf() {
      var title = "单页报告";
      var dom = document.getElementById("pdf-container");  // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = canvas.width;
        var contentHeight = canvas.height;
        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 pageData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new JsPDF("", "pt", [pdfWidth, pdfHeight]);
        pdf.addImage(pageData, "jpeg", 0, 0, imgWidth, imgHeight);
        pdf.save(title + ".pdf");
    // 多页pdf-转换后的样式需要手动调整iframe的宽、高+html2Canvas的width、height+contentWidth、contentHeight
    getManyPdf() {
      let _this = this;
      var dom = document.getElementById("pdf-container"); // 生成pdf的html内容
      html2Canvas(dom, {
        allowTaint: true,
        scrollY: 0,
        scrollX: 0,
        useCORS: true, // 开启跨院
        width: 1000, // 这个宽度,太扯淡了,固定1000,防止偏移!
        height: dom.offsetHeight
      }).then(function(canvas) {
        var contentWidth = 900; // 宽高写死,强制分页
        var contentHeight = 5060;
        //一页pdf显示html页面生成的canvas高度;
        var pageHeight = contentWidth / 592.28 * 841.89;
        //未生成pdf的html页面高度
        var leftHeight = contentHeight;
        //页面偏移
        var position = 0;
        //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
        var imgWidth = 595.28;
        var imgHeight = 3400; // 为了分页,所以写死。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) {
            //arg3-->距离左边距;arg4-->距离上边距;arg5-->宽度;arg6-->高度
            pdf.addImage(pageData, "JPEG", 0, position, imgWidth, imgHeight);
            leftHeight -= pageHeight;
            position -= 841.89;
            //避免添加空白页
            if (leftHeight > 0) {
              pdf.addPage();
        pdf.save(`多页报告}.pdf`);
 
推荐文章
正直的剪刀  ·  Mysql日期格式聚合统计的方法是什么-PingCAP | 平凯星辰
1 年前
爱听歌的土豆  ·  SpringBoot中文件二进制流下载功能Api - 大飞_dafei - 博客园
1 年前
听话的吐司  ·  Genymotion模拟器的使用-CSDN博客
1 年前
文雅的领结  ·  ICommand Interface (System.Windows.Input) | Microsoft Learn
2 年前
精明的领带  ·  git修改提交时间_使用Git,从码云上clone项目到本地,修改完之后提交项目到码云..._weixin_39914868的博客-CSDN博客
2 年前
今天看啥   ·   Py中国   ·   codingpro   ·   小百科   ·   link之家   ·   卧龙AI搜索
删除内容请联系邮箱 2879853325@qq.com
Code - 代码工具平台
© 2024 ~ 沪ICP备11025650号