html2canvas文档地址

http://html2canvas.hertzen.com/configuration

方式一：使用html2canvas和jspdf插件实现

该方式是通过html2canvas将HTML页面转换成图片，然后再通过jspdf将图片的base64生成为pdf文件。实现步骤如下：

1,下载插件模块

npm install html2canvas jspdf --save

2,定义功能实现方法

在项目工具方法存放文件夹utils中创建htmlToPdf.js文件，代码如下：

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

  install (Vue, options) {

    Vue.prototype.getPdf = function () {

      var title = this.htmlTitle

      html2Canvas(document.querySelector('#pdfDom'), {

        allowTaint: true

      }).then(function (canvas) {

        let contentWidth = canvas.width

        let contentHeight = canvas.height

        let pageHeight = contentWidth / 592.28 * 841.89

        let leftHeight = contentHeight

        let position = 0

        let imgWidth = 595.28

        let imgHeight = 592.28 / contentWidth * contentHeight

        let pageData = canvas.toDataURL('image/jpeg', 1.0)

        let PDF = new JsPDF('', 'pt', 'a4')

        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(title + '.pdf')

      }

      )

    }

  }

}

3, 全局引入实现方法

import htmlToPdf from '@/components/utils/htmlToPdf'

// 使用Vue.use()方法就会调用工具方法中的install方法

Vue.use(htmlToPdf)

4, 在相关要导出的页面中，点击时调用绑定在Vue原型上的getPdf方法，传入id即可

/html
<div id="pdfDom">
    <!-- 要下载的HTML页面,页面是由后台返回 -->
    <div v-html="pageData"></div>
</div>
<div class="text-center">
    <el-button type="primary" size="small" @click="getPdf('#pdfDom')">点击下载</el-button>
</div>

这里模拟一个页面在sript标签中写

const html1=`<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>我是需要pdf导出的页面</title>

</head>

<style>

    .lala{

        width:300px;

        height:300px;

        background:pink;

        color:red;

        font-size:60px;

    }

</style>

<body>

    <div class="lala">我是有颜色的div</div>

</body>

</html>`

data

data(){

        return {

            htmlTitle: '页面导出PDF文件名',

            pageData:html1

        }

    },

当然，如果是导出当前页面，就不用这么麻烦了，把最外成元素的id写成pdfDom就可以了

以上就是前端简单导出pdf

文章来源：

https://www.jianshu.com/p/56680ce1cc97

当然：为了减少，项目体积html2canvas.js可以用bootcdn引入，

首先在html页面用script标签引入html2canvas.js，在config.js中设置

externals: {

      'html2canvas':'html2canvas'

    }

这样就可以通过import在自己的js内引入html2canvas.js了，例如下面

import html2Canvas from 'html2canvas'

不过，用这种方式引入jspdf.js却没成功，或许是不知道jspdf.js全局变量，知道的大神可以留言

测试了下代码，bug来了！！！

当我把需要转化成cavas的html内容高度写的老高时，发现上述代码只生成了视口之内的内容，视口之外的内容没有生成到cavas上，调了老半天，在网上查了个方法试试，

就是，将要转化cavas的元素，用jquery的克隆方法克隆一份，然后添加到body内，再让html2canvas.js去按照这个克隆的元素，去生成cavas，然后就可以生成完整了，pdf保存之后，再将这个克隆的元素删除，修稿后的代码如下：

htmlToPdf.js：

// 导出页面为PDF格式

import html2Canvas from 'html2canvas'

import JsPDF from 'jspdf'

export default{

  install (Vue, options) {

    Vue.prototype.getPdf = function () {

      var title = this.htmlTitle;

      var targetDom = $("#pdfDom");

      let copyDom = targetDom.clone();

      $('body').append(copyDom);

      html2Canvas(copyDom, {

        allowTaint: true,

      }).then(function (canvas) {

        let contentWidth = canvas.width

        let contentHeight = canvas.height

        let pageHeight = contentWidth / 592.28 * 841.89

        let leftHeight = contentHeight

        let position = 0

        let imgWidth = 595.28

        let imgHeight = 592.28 / contentWidth * contentHeight

        let pageData = canvas.toDataURL('image/jpeg', 1.0)

        let PDF = new JsPDF('', 'pt', 'a4')

        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(title + '.pdf');

        copyDom.remove();

      }

      )

    }

  }

}

哦了，但是有一点，我点击生成的时候，页面会闪出来一下那个克隆的元素，又消失，感觉不大好，继续解决

前端导出pdf的更多相关文章

  1. 纯前端导出pdf文件

    纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...

  2. html/jsp导出pdf格式的几种方法（jsPDF，iText，wkhtmltopdf）

    在许多生成报表的时候需要我们后台作出动态的数据,并渲染到前端生成pdf格式,Excel格式的各种报表,但是浏览器自带的生成pdf功能,windows系统的ctrl+p键就能完全搞定这一需求,但对客户来 ...

  3. java利用itext导出pdf

    项目中有一功能是导出历史记录,可以导出pdf和excel,这里先说导出pdf.在网上查可以用那些方式导出pdf,用itext比较多广泛. 导出pdf可以使用两种方式,一是可以根据已有的pdf模板,进行 ...

  4. java根据模板导出PDF详细教程

    原文:https://blog.csdn.net/pengyufight/article/details/75305128 题记:由于业务的需要,需要根据模板定制pdf文档,经测试根据模板导出word ...

  5. 使用 puppeteer 创建一个自动化导出 PDF 的服务

    最近在基于 RAP2 做内网的一个 API 管理平台,涉及到与外部人员进行协议交换,需要提供 PDF 文档. 在设置完成 CSS 后已经可以使用浏览器的打印功能实现导出 PDF,但全手动,总是觉得不爽 ...

  6. JSP页面导出PDF格式文件

    JSP页面导出PDF格式文件基本在前端页面可以全部完成 <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/ ...

  7. 前端生成PDF，让后端刮目相看

    PDF 简介 PDF 全称Portable Document Format (PDF)(便携文档格式),该格式的显示与操作系统.分辨率.设备等因素没有关系,不论是在Windows,Unix还是在苹果公 ...

  8. .Net导出pdf文件,C#实现pdf导出

    最近碰见个需求需要实现导出pdf文件,上网查了下代码资料总结了以下代码.可以成功的实现导出pdf文件. 在编码前需要在网上下载个itextsharp.dll,此程序集是必备的.楼主下载的是5.0版本, ...

  9. 前端导出Excel兼容写法

    今天整理出在Web前端导出Excel的写法,写了一个工具类,对各个浏览器进行了兼容. 首先,导出的数据来源可能有两种: 1. 页面的HTML内容(一般是table) 2. 纯数据 PS:不同的数据源, ...

随机推荐

  1. 【Python基础】09_Python中的元组

    1.元组的定义 Tuple (元组)与列表类似,元组的元素 不能修改 元组通常保存 不同类型 的数据 元组用()定义 info_tuple = ("张三", 18, 1.75) 定 ...

  2. Java手写简单HashMap一(包括增加，查找，toString，泛型)

    @Java 300 学习总结 HashMap底层采用实现采用了哈希表,结合了"数组和链表". 原理如图 一.定义HashMap类. 首先需要定义一个节点来存储数据,构成链表结构. ...

  3. 12.如何设置ulimit

    ulimit -a用来显示当前的各种用户进程限制 修改所有 linux 用户的环境变量文件:vi /etc/profileulimit -u 10000              #用户的最大进程数u ...

  4. 第十二章 ZYNQ-MIZ701 PL中断请求

      本篇文章主要介绍外设(PL)产生的中断请求,在PS端进行处理. 在PL端通过按键产生中断,PS接受到之后点亮相应的LED. 本文所使用的开发板是Miz701 PC 开发环境版本:Vivado 20 ...

  5. php 压缩接口

    function rtnJson($obj) { if (!headers_sent() && // 如果页面头部信息还没有输出 extension_loaded("zlib ...

  6. Nodejs：单线程为什么能支持高并发？

      1.Nodejs是一个平台,构建在chrome的V8上(js语言解释器),采用事件驱动.非阻塞模型( c++库:libuv). 参考官方: Node.js is a platform built ...

  7. HTML Ueditor加载空白问题

    问题描述 Ueditor打开时加载不出内容 原因分析 Ueditor重复加载时,会存在缓存问题 Ueditor采用异步加载方式,所以数据获取和赋值要写在Ueditor异步回调里 解决方案 UE.del ...

  8. 行内块和文字垂直对齐vertical-agign

    vertical-align 垂直对齐 (对于块级元素无效,主要用来控制表单或者图片与文字对齐的) 图片和文字默认是基线对齐 属性: baseline 基线 top 顶线 middle 中线 bott ...

  9. 转载：PHP扩展函数库-文件系统、进程与网络

    PHP的扩展函数库十分庞大,官方的非官方的,在这里只记录一些目前比较常用的扩展,对于这一部分,也只是记录其中一些核心的函数,不是一个全面记录.对于详细的扩展函数说明,需要在使用中参考PHP的用户手册. ...

  10. Outline 科学的上网

    outline 官网:https://getoutline.org/zh-CN/home 下载 Outline 管理器 下载 Outline 客户端 配置浏览器代理