JavaScript将HTML元素导出PDF及World

最新推荐文章于 2024-08-08 07:59:25 发布

种一颗杨梅树

最新推荐文章于 2024-08-08 07:59:25 发布

阅读量2.6k

点赞数 3

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/weixin_44221247/article/details/121991499

版权

JavaScript导出PDF及World

前言

使用软件版本 Vue 2.6.10 Office2016 Office2019 WPS

提示：以下是本篇文章正文内容，下面案例可供参考

一、JavaScript导出PDF

JavaScript导出PDF,原理就是将World转成图片将图片写进PDF里并生成

1.下载依赖并引用

npm install html2canvas -S
npm install jsPDF -S

import 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 -S

2、引用

	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的电脑显示情况