Vue to PDF

使用html2canvas和jspdf 质量较差

（1）npm install –save html2canvas（将页面html转换成图片）
（2）npm install –save jspdf（将图片生成pdf）

1 ./util/htmlToPdf
// 导出页面为PDF格式
import html2canvas from "html2canvas"
import JSPDF from "jspdf"
export default {
    install (Vue, options) {
        Vue.prototype.ExportSavePdf = function (htmlTitle, currentTime) {
            var element = document.getElementById("pdfCentent")
            html2canvas(element, {
                logging: false
            }).then(function (canvas) {
                var pdf = new JSPDF("p", "mm", "a4") // A4纸，纵向
                var ctx = canvas.getContext("2d")
                var a4w = 170; var a4h = 257 // A4大小，210mm x 297mm，四边各保留20mm的边距，显示区域170x257
                var imgHeight = Math.floor(a4h * canvas.width / a4w) // 按A4显示比例换算一页图像的像素高度
                var renderedHeight = 0

                while (renderedHeight < canvas.height) {
                    var page = document.createElement("canvas")
                    page.width = canvas.width
                    page.height = Math.min(imgHeight, canvas.height - renderedHeight)// 可能内容不足一页

                    // 用getImageData剪裁指定区域，并画到前面创建的canvas对象中
                    page.getContext("2d").putImageData(ctx.getImageData(0, renderedHeight, canvas.width, Math.min(imgHeight, canvas.height - renderedHeight)), 0, 0)
                    pdf.addImage(page.toDataURL("image/jpeg", 1.0), "JPEG", 10, 10, a4w, Math.min(a4h, a4w * page.height / page.width)) // 添加图像到页面，保留10mm边距

                    renderedHeight += imgHeight
                    if (renderedHeight < canvas.height) { pdf.addPage() }// 如果后面还有内容，添加一个空页
                    // delete page;
                }
                pdf.save(htmlTitle + currentTime)
            })
        }
    }
}

2 main.js
import htmlToPdf from "./util/htmlToPdf"
Vue.use(htmlToPdf)

3 xxx.vue
<el-button type="danger" @click="ExportSavePdf(htmlTitle,nowTime)">导出PDF</el-button>
<div id="pdfCentent">pdf content</div>

export default {
        data() {
            return {
                        htmlTitle: "PDF名称",
                        nowTime: "",

使用window.print()方法

let handleWindowPrint = (ele, fileName, vm)=>{

    var oIframe = document.createElement('iframe');
    var oScript = document.createElement('script');

    document.body.appendChild(oIframe);

    var titleText = document.head.getElementsByTagName('title')[0].innerText;
    document.head.getElementsByTagName('title')[0].innerText = `${fileName}`;

    oIframe.contentDocument.head.innerHTML = `<meta charset="utf-8">
                                              <title>${fileName}</title>
                                              <meta name="format-detection" content="telephone=no">
                                              <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
                                              <meta name="viewport" content="width=device-width,initial-scale=1.0">`;

    // oIframe.contentWindow.document.body.innerHTML = document.querySelector(ele).outerHTML;
    oIframe.contentDocument.body.innerHTML = document.querySelector(ele).outerHTML;
    oScript.innerHTML = 'window.print();';
    oIframe.contentDocument.body.appendChild(oScript);
    document.body.removeChild(oIframe);
    document.head.getElementsByTagName('title')[0].innerText = titleText;

};

export default {
    handleWindowPrint
}

用插件 vue-print-nb

https://github.com/Power-kxLee/vue-print-nb

第一步、安装
npm install vue-print-nb --save
第二步、在main.js中引用
    import Print from 'vue-print-nb'
    Vue.use(Print);
第三步、组件中使用
     <button v-print="printObj">Print local range</button>
      <div id="printMe" style="background:red;">
            <p>...</p>
        </div>
    export default {
        data() {
            return {
                printObj: {
                  id: "printMe",
                  popTitle: 'good print',
                  extraCss: 'https://www.google.com,https://www.google.com',
                  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>'
                }
            };
        }
    }

使用lodop实现打印

http://www.lodop.net/
改造LodopFuncs.js
//====判断是否需要安装CLodop云打印服务器:====
export function needCLodop(){ …… }
//====获取LODOP对象的主过程：====
export function getLodop(oOBJECT,oEMBED){ …… }

具体的调用页面

<el-button @click="printPdf" >打印</el-button>
    <div id="form1">...</div>
import {getLodop} from '../common/LodopFuncs'
......
    methods: {
      printPdf() {
        this.CreateOneFormPage();
//        LODOP.PRINT();
        LODOP.PREVIEW();
      },
      CreateOneFormPage() {
        LODOP = getLodop();
        LODOP.PRINT_INIT("订货单");
        LODOP.SET_PRINT_STYLE("FontSize", 18);
        LODOP.SET_PRINT_STYLE("Bold", 1);
        LODOP.ADD_PRINT_TEXT(50, 231, 260, 39, "打印页面部分内容");
        LODOP.ADD_PRINT_HTM(88, 200, 350, 600, 
                                       document.getElementById("form1").innerHTML);   

      },
    }
......
如何选择打印机
data() {
      return {
        printOptions: [],
        printValue: '-1'
      }
    },
....
getLodopData() {
        LODOP = getLodop();
        let arr = []
        let iPrinterCount = LODOP.GET_PRINTER_COUNT();
        for (let i = 0; i < iPrinterCount; i++) {
          arr.push({
            label: LODOP.GET_PRINTER_NAME(i),
            value: i
          })
        }
        let defaultName = LODOP.GET_PRINTER_NAME('-1')  //GET_PRINTER_NAME(intPrinterIndex);用序号获得打印机名，一般序号从0开始，-1特指默认打印机；
        arr.forEach(item => {
          if (item.label === defaultName) {
            item.value = '-1'
            item.label += '-默认打印机'
          }
        })
        console.log(defaultName)
        this.printOptions = arr
      }
打印时候只需指定打印机就行了，
LODOP.SET_PRINTER_INDEX(this.printValue)  // 按指定的打印机序号进行打印