JavaScript导出PDF及World
- JavaScript导出PDF及World
- 前言
- 一、JavaScript导出PDF
- 1.下载依赖并引用
- 2.获取DOM元素
- 3.实例化JSPDF对象
- 3.实例化html2canvas对象
- 4.canvans转image
- 5.将图片写入PDF
- 6.导出
- 7.博主代码
- 二、JavaScript导出World
- 1、下载依赖
- 2、引用
- 3、获得DOM
- 4、获得HTML元素
- 5、HTML转二进制
- 6、下载
- 7、博主代码
- 提示 JS转World会出现
- 三、JavaScript导出World 2.0
JavaScript导出PDF及World
前言
使用软件版本 Vue 2.6.10 Office2016 Office2019 WPS
提示：以下是本篇文章正文内容，下面案例可供参考
一、JavaScript导出PDF
JavaScript导出PDF,原理就是将World转成图片 将图片写进PDF里并生成
1.下载依赖并引用
npm install html2canvas -S
npm install jsPDF -Simport html2canvas from 'html2canvas'
import jsPDF from 'jspdf'2.获取DOM元素
document.getElementById("XXX")3.实例化JSPDF对象
let pdf = new jsPDF('', 'pt', 'a4')入参解释
1、生成PDF纸张方向 默认纵向
2、生成PDF单位:mm、cm、px、pt 默认:mm
3、根据入参2设置的单位生成纸张大小默认:‘a4’，可自定义大小只需要往入参3里传递数组[x,y]即可
PS:一张A4值比例为595.3 pt * 841.9 pt
正常PC端 1cm≈28.34761pt
3.实例化html2canvas对象
let option={
backgroundColor: '#fff', // null无背景
allowTaint: true, // 是否允许跨域图片渲染
useCORS: true, // 是否允许跨域图片加载
taintTest: true, // 是否在渲染前测试图片
logging: false, // 是否在console.log()中输出信息
timeout: 100, // 图片加载延迟,默认0
// canvas: canvas,
width: width,//宽度
height: height,//高度
// scale: scale //放大或者缩小 正常值:1
}
let canvans = html2canvas(dom, option).then((canvans)=>{
//canvans则是将Dom转成画布以后的对象
})入参解释
1、dom节点
2、属性
4.canvans转image
let pageData = canvans.toDataURL('image/jpeg', 1)入参解释
1、生成图片类型
2、是否放大 放大多少倍 正常值：1
5.将图片写入PDF
pdf.addImage(pageData, 'JPEG', 90.1453998, 72.0029294, 415.0, 697.87)入参解释
1、图片数据
2、写入图片类型
3、向左偏移多少 根据PDF实例化声明的单位
4、向上偏移多少 根据PDF实例化声明的单位
5、图片宽度 根据PDF实例化声明的单位
6、图片高度 根据PDF实例化声明的单位
6.导出
pdf.save(“Demo.pdf”)7.博主代码
async getPdf() {
this.loadingText = '正在生成Dom' // 此代码是Element-Ui 提示文字
let pages = document.querySelectorAll('.preview .page')
let pdf = new jsPDF('', 'pt', 'a4')
for (let i = 0; i < pages.length; i++) {
this.loadingText = `正在生成第${i + 1}页`
let page = pages[i]
let width = page.offsetWidth
let height = page.offsetHeight
let option = {
backgroundColor: '#fff', // null无背景
allowTaint: true, // 是否允许跨域图片渲染
useCORS: true, // 是否允许跨域图片加载
taintTest: true, // 是否在渲染前测试图片
logging: false, // 是否在console.log()中输出信息
timeout: 100, // 图片加载延迟,默认0
// canvas: canvas,
width: width,//宽度
height: height,//高度
// scale: scale //放大或者缩小 正常值:1
}
let canvans = await html2canvas(page, option)
let pageData = canvans.toDataURL('image/jpeg', 0.5)
//一张A4值比例为595.3 pt * 841.9 pt
//1cm≈28.34761pt
//world文档默认边距为 上下 2.54cm 左右 3.18cm
//正常宽度应该为 595.3-(3.18 * 28.34761pt * 2)≈415 单位:pt
//正常高度应该为 841.9-(2.54 * 28.34761pt * 2)≈697.87 单位:pt
pdf.addImage(pageData, 'JPEG', 90.1453998, 72.0029294, 415.0, 697.87)
pageData = null
canvans = null
pdf.text(`${i + 1}/${pages.length}`, 297.65, 841.0, 'left')
if (i < pages.length - 1) {
pdf.addPage()//增加一页Pdf
}
}
this.loadingText = `合并数据`
let name = "Demo.pdf"
pdf.save(name)
}更多API可进
JSPDF官网：JSPDF html2canvas官网：html2canvas
二、JavaScript导出World
1、下载依赖
npm install file-saver -S2、引用
import { saveAs } from 'file-saver';3、获得DOM
代码如下（示例）：
let Node=document.getElementById("XXX")4、获得HTML元素
let HTML=Node.innerHTML;5、HTML转二进制
let blob = new Blob([html], { type: 'text/html;charset=utf-8' })6、下载
saveAs(blob,'Demo.doc')7、博主代码
handleExport() {
this.loadingText = '正在收集图表数据...'
let preview = document.querySelectorAll('.preview')[0]
this.loadingText = '正在生成所有图例图片...'
//此方法是处理了echarts转图片写入HTML标签里
let html = this.handleDomtohtml(preview, this.echartsList)
this.loadingText = '正在生成World文件...'
let blob = new Blob([html], { type: 'text/html;charset=utf-8' })
let name = this.dowloadInfo.name + ' ' + this.dowloadInfo.time
this.$save(blob, `${name}.doc`)
}提示 JS转World会出现
除行内样式以外的样式显示不出
1、office版本兼容问题
2、样式显示异常
在我的强烈要求下,要求我们的后端使用后端技术导出 也会出现类似的问题,使用WPS转换（VIP付费）也会出现一些格式问题
同事1的电脑显示情况
同事2的电脑显示情况
我的电脑显示情况
同事3
三、JavaScript导出World 2.0
更新时间：2021/12/21
博主最近找到了解决图片显示异常的解决办法 通过阅读jquery.wordexport.js的源码发现了一个问题也就是写入本地图片的时候最好是声明一下图片文件
jquery.wordexport.js部分代码展示
具体实现方法:
以这种形式写入World 这样写入对于Office的兼容性就已经解决了 效果展示：
最后的最后只需要解决最后两个问题
1、除行内样式以外的样式无法使用
2、文字标签（P、Span、label）行高无法设置
