首先安装 html2Canvas 和 jspdf

npm i html2canvas -S

npm i jspdf -S

然后在vue页面引入

import html2Canvas from 'html2canvas'
import JsPDF from 'jspdf'

最后实现:

html2Canvas(document.querySelector('.hello'), { allowTaint: true }).then(function (canvas) {      //.hello是你要导出的范围
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('earth.pdf')
})

Cesium导出PDF的更多相关文章

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

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

  2. JS导出PDF插件(支持中文、图片使用路径)

    在WEB上想做一个导出PDF的功能,发现jsPDF比较多人推荐,遗憾的是不支持中文,最后找到pdfmake,很好地解决了此问题.它的效果可以先到http://pdfmake.org/playgroun ...

  3. ITextSharp导出PDF表格和图片(C#)

    文章主要介绍使用ITextSharp导出PDF表格和图片的简单操作说明,以下为ITextSharp.dll下载链接 分享链接:http://pan.baidu.com/s/1nuc6glj 密码:3g ...

  4. JAVA导出pdf实例

    一.直接导出成PDF   Java代码 1. import java.io.FileNotFoundException; 2. import java.io.FileOutputStream; 3.  ...

  5. 利用ITextSharp导出PDF文件

    最近项目中需要到处PDF文件,最后上网搜索了一下,发现ITextSharp比较好用,所以做了一个例子: public string ExportPDF() { //ITextSharp Usage / ...

  6. iText导出pdf、word、图片

    一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生成PDF报表,客户端采用超级连接显示或 ...

  7. Itext导出PDF,word,图片案例

    iText导出pdf.word.图片 一.前言 在企业的信息系统中,报表处理一直占比较重要的作用,本文将介绍一种生成PDF报表的Java组件--iText.通过在服务器端使用Jsp或JavaBean生 ...

  8. Ireport 报表导出 Poi + ireport 导出pdf, word ,excel ,htm

    Ireport 报表导出 Poi + ireport 导出pdf, doc ,excel ,html 格式 下面是报表导出工具类reportExportUtils 需要导出以上格式的报表 只需要调用本 ...

  9. Spring Boot 系列教程18-itext导出pdf下载

    Java操作pdf框架 iText是一个能够快速产生PDF文件的java类库.iText的java类对于那些要产生包含文本,表格,图形的只读文档是很有用的.它的类库尤其与java Servlet有很好 ...

随机推荐

  1. Codeforces 1185G2 Playlist for Polycarp (hard version) 背包,暴力

    题意及思路:https://www.cnblogs.com/Als123/p/11061147.html 代码: #include <bits/stdc++.h> #define LL l ...

  2. curl分析请求的各个部分耗时情况

    curl 命令提供了 -w 参数,解释如下 -w, --write-out Make curl display information on stdout after a completed tran ...

  3. Linux下的Jenkins作为hub,Windows作为node节点,在Android手机上执行自动化脚本

    1.在Linux上放selenium-server-standalone-2.53.0.jar,在jar包目录下执行命令java -jar selenium-server-standalone-2.5 ...

  4. 【leetcode】908. Smallest Range I

    题目如下: 解题思路:简单的不能再简单的题目了,对于任意一个A[i]来说,其可能的最小的最大值是A[i]-K,最大的最小值是A[i]+K.遍历数组,求出所有元素中最大的最小值和最小的最大值,两者之差( ...

  5. shell脚本编程测试类型上

    一bash的条件测试 判断某需求是否满足,需要由测试机制来实现.专用的测试表达式需要由测试命令辅助完成测试过程. 评估布尔声明,以便用在条件性执行中.若真,则返回0:若假,则返回1. 测试命令:• t ...

  6. vue基础九

    1.使用组件 1.1注册 要注册一个全局组件,你可以使用 Vue.component(tagName, options). 例如: Vue.component('my-component', { // ...

  7. Python基础(二):斐波那契数列、模拟cp操作、生成8位随机密码

    一.斐波那契数列 目标: 编写fib.py脚本,主要要求如下: 输出具有10个数字的斐波那契数列 使用for循环和range函数完成 改进程序,要求用户输入一个数字,可以生成用户需要长度的斐波那契数列 ...

  8. Python之-异常处理

    1.python中处理异常的方式 #coding:utf8 filename=raw_input("请输入你要操作的文件") try: f=open(filename) print ...

  9. php把网络图片转Base64编码。(php将图片链接直接转化为base64编码)

    /** 把网络图片图片转成base64 * @param string $img 图片地址 * @return string */ /*网络图片转为base64编码*/ public function ...

  10. Nacos Config客户端与Spring Boot、Spring Cloud深度集成

    目录 Nacos与Spring Boot集成 @NacosPropertySource和@NacosValue com.alibaba.nacos.spring.core.env.NacosPrope ...