通过纯js将网页保存为pdf，A4分页，无需服务端参与

1.引入js库文件：

<script src="../static/jspdf/html2canvas.js"></script>

<script src="../static/jspdf/jsPdf.debug.js"></script>

2.思路：

用html2canvas截取页面（html2canvas就是这样一款前端插件,它的原理是将Dom节点在Canvas里边画出来），然后用jsPDF来生成pdf文件。

3.核心代码：

为了保证生成的pdf空白区域没有黑色背景，在操作之前先把背景设置为白色（因为沒有背景色，截取时会以黑色填充）

$("#"+divID).css("background-color","white");

解决html2canvas截取页面太模糊，创建一个新的canvas：

var canvas_new = document.createElement("canvas");

var scale = 2;

var w = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).width);

var h = parseInt(window.getComputedStyle(document.querySelector("#"+divID)).height);

将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了：

canvas_new.width = w * scale;

canvas_new.height = h * scale;

canvas_new.getContext("2d").scale(scale, scale);

进行导出：

var options = {

    canvas: canvas_new

};

html2canvas(document.querySelector("#"+divID),options)..then(function(canvas) {

var contentWidth = canvas.width;

var contentHeight = canvas.height;



//一页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 = 592.28/contentWidth * contentHeight+45;



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) {

        pdf.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)

        leftHeight -= pageHeight;

        position -= 841.89;

//避免添加空白页

        if(leftHeight > 0) {

            pdf.addPage();

        }

    }

}

pdf.save('name.pdf');

---------------------
作者：致虚极POLE守静笃
来源：CSDN
原文：https://blog.csdn.net/u011821334/article/details/79389426
版权声明：本文为作者原创文章，转载请附上博文链接！
内容解析By：CSDN,CNBLOG博客文章一键转载插件

JavaScript导出PDF及World

前言

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

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

我的电脑显示情况

同事3

三、JavaScript导出World 2.0

更新时间：2021/12/21
博主最近找到了解决图片显示异常的解决办法 通过阅读jquery.wordexport.js的源码发现了一个问题也就是写入本地图片的时候最好是声明一下图片文件
jquery.wordexport.js部分代码展示

具体实现方法:

以这种形式写入World 这样写入对于Office的兼容性就已经解决了 效果展示：

最后的最后只需要解决最后两个问题
1、除行内样式以外的样式无法使用
2、文字标签（P、Span、label）行高无法设置

如果各位有另外的解决方案可以一起讨论学习交流一下

1.print.js

// 打印类属性、方法定义
/* eslint-disable */
const Print = function (dom, options) {
  if (!(this instanceof Print)) return new Print(dom, options);

  this.options = this.extend({
    'noPrint': '.no-print'
  }, options);

  if ((typeof dom) === "string") {
    this.dom = document.querySelector(dom);
  } else {
    this.isDOM(dom)
    this.dom = this.isDOM(dom) ? dom : dom.$el;
  }

  this.init();
};
Print.prototype = {
  init: function () {
    var content = this.getStyle() + this.getHtml();
    this.writeIframe(content);
  },
  extend: function (obj, obj2) {
    for (var k in obj2) {
      obj[k] = obj2[k];
    }
    return obj;
  },

  getStyle: function () {
    var str = "",
      styles = document.querySelectorAll('style,link');
    for (var i = 0; i < styles.length; i++) {
      str += styles[i].outerHTML;
    }
    str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
    str += "<style>html,body,div,#preview-main,.report{width:100%!important;height: auto!important;font-size:14px}</style>";

    return str;
  },

  getHtml: function () {
    var inputs = document.querySelectorAll('input');
    var textareas = document.querySelectorAll('textarea');
    var selects = document.querySelectorAll('select');
    var canvass = document.querySelectorAll('canvas');

    for (var k = 0; k < inputs.length; k++) {
      if (inputs[k].type == "checkbox" || inputs[k].type == "radio") {
        if (inputs[k].checked == true) {
          inputs[k].setAttribute('checked', "checked")
        } else {
          inputs[k].removeAttribute('checked')
        }
      } else if (inputs[k].type == "text") {
        inputs[k].setAttribute('value', inputs[k].value)
      } else {
        inputs[k].setAttribute('value', inputs[k].value)
      }
    }

    for (var k2 = 0; k2 < textareas.length; k2++) {
      if (textareas[k2].type == 'textarea') {
        textareas[k2].innerHTML = textareas[k2].value
      }
    }

    for (var k3 = 0; k3 < selects.length; k3++) {
      if (selects[k3].type == 'select-one') {
        var child = selects[k3].children;
        for (var i in child) {
          if (child[i].tagName == 'OPTION') {
            if (child[i].selected == true) {
              child[i].setAttribute('selected', "selected")
            } else {
              child[i].removeAttribute('selected')
            }
          }
        }
      }
    }

    //canvass echars图表转为图片
    for (var k4 = 0; k4 < canvass.length; k4++) {
      var imageURL = canvass[k4].toDataURL("image/png");
      var img = document.createElement("img");
      img.src = imageURL;
      img.setAttribute('style', 'max-width: 100%;');
      img.className = 'isNeedRemove'
      // canvass[k4].style.display = 'none'
      // canvass[k4].parentNode.style.width = '100%'
      // canvass[k4].parentNode.style.textAlign = 'center'
      canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
    }

    return this.dom.outerHTML;
  },

  writeIframe: function (content) {
    var w, doc, iframe = document.createElement('iframe'),
      f = document.body.appendChild(iframe);
    iframe.id = "myIframe";
    //iframe.style = "position:absolute;width:0;height:0;top:-10px;left:-10px;";
    iframe.setAttribute('style', 'position:absolute;width:0;height:0;top:-10px;left:-10px;');
    w = f.contentWindow || f.contentDocument;
    doc = f.contentDocument || f.contentWindow.document;
    doc.open();
    doc.write(content);
    doc.close();
    
    // 避免重复打印echarts
    var removes = document.querySelectorAll('.isNeedRemove');
    for (var k = 0; k < removes.length; k++) {
      removes[k].parentNode.removeChild(removes[k]);
    }

    var _this = this
    iframe.onload = function(){
      _this.toPrint(w);
      setTimeout(function () {
        document.body.removeChild(iframe)
      }, 100)
    }
  },

  toPrint: function (frameWindow) {
    try {
      setTimeout(function () {
        frameWindow.focus();
        try {
          if (!frameWindow.document.execCommand('print', false, null)) {
            frameWindow.print();
          }
        } catch (e) {
          frameWindow.print();
        }
        frameWindow.close();
      }, 10);
    } catch (err) {
      console.log('err', err);
    }
  },
  isDOM: (typeof HTMLElement === 'object') ?
    function (obj) {
      return obj instanceof HTMLElement;
    } :
    function (obj) {
      return obj && typeof obj === 'object' && obj.nodeType === 1 && typeof obj.nodeName === 'string';
    }
};
const MyPlugin = {}
MyPlugin.install = function (Vue, options) {
  // 4. 添加实例方法
  Vue.prototype.$print = Print
}
export default MyPlugin

自己页面的样式添加

 str += "<style>html,body,div,#preview-main,.report{width:100%!important;height: auto!important;font-size:14px}</style>";

解决echarts图表多点击一次 就会多一张bug

img.className = 'isNeedRemove'
canvass[k4].parentNode.insertBefore(img,canvass[k4].nextElementSibling);
var removes = document.querySelectorAll('.isNeedRemove');

2.用法

//调用系统打印机
print () {
    this.$print(this.$refs.print) // 使用
},

题外话
1.在自己需要的页面引用打印页面 这边我打印页面时preview.vue页面

 <!-- 预览 -->
<Modal v-model="previewModal" fullscreen :mask-closable="false" :closable="false">
    <preview ref="print" :previewEditOldForm="previewEditForm"></preview>
    <div slot="footer" class="btn">
        <Button type="text" @click="closePreview">关闭</Button>
        <Button type="primary" @click="print">打印</Button>
    </div>
</Modal>  

import Preview from '../operation_report/Preview'
export default {
	components: {
         Preview
    }
}

2. 获取别的页面的表单内容 初始化

export default {
	data() {
		return{
			previewEditForm: {},
		}
    }
}

// 父组件向子组件传值
 on: {
     click: () => {
          // 父组件向子组件传值
          this.previewEditForm = params.row;
          setTimeout(() => {
              this.$refs.print.queryById();
              this.$refs.print.eventOverviews();
              this.previewModal=true;
          }, 2000)
      }
  }

3. 隐藏打印页面不需要的按钮

<style scoped>
    @media print {
        .btn{
            display: none;
        }
    }
</style>

4.打印内容有echarts时 内容不自适应 调整width

width: 210mm;

最终如下