在需要的页面引入
<a-button style="margin: 0px 5px" :loading="loading" @click="printPdf">
打印
</a-button>
import { getLodop } from '@/common/LodopFuncs'; //引入js
import { getPrintList } from '@/api/print/print'; //调用后台接口返回的数据
在点击事件中这样写
printPdf() {
// this.CreateOneFormPage();
getPrintList().then(res => {
console.log(res);
LODOP.PRINT_INIT(''); // 初始化
LODOP.ADD_PRINT_HTM('5mm', 34, 'RightMargin:0.9cm', 'BottomMargin:9mm', (document.documentElement.innerHTML = res.data)); // 获取后台html页面替换当前页
LODOP.PREVIEW(); // 打印预览
// LODOP.PRINT(); // 此处为直接打印
});
console.log(LODOP);
},
// CreateOneFormPage(strPName, strJJRXM, strJJRDW, strJJRDZ, strSJRXM, strSJRDW, strSJRDZ, strNJPM, strNJSL, strJJRDH, strSJRDH) {
// LODOP = getLodop();
// LODOP.PRINT_INITA(14, 11, 800, 600, strPName); // 打印任务名
// LODOP.SET_PRINT_PAGESIZE(1, '209mm', '113mm', ''); // 设置纸张高度
// LODOP.ADD_PRINT_TEXT(95, 95, 75, 20, strJJRXM); // 寄件人姓名
// LODOP.ADD_PRINT_TEXT(123, 148, 194, 20, strJJRDW); // 寄件人单位名称
// LODOP.ADD_PRINT_TEXT(158, 101, 238, 35, strJJRDZ); // 寄件人的详细地址
// LODOP.ADD_PRINT_TEXT(92, 446, 75, 20, strSJRXM); // 收件人姓名
// LODOP.ADD_PRINT_TEXT(122, 496, 208, 20, strSJRDW); // 收件人单位名称
// LODOP.ADD_PRINT_TEXT(160, 460, 244, 35, strSJRDZ); // 收件人详细地址
// LODOP.ADD_PRINT_TEXT(289, 47, 178, 22, strNJPM); //内件品名
// LODOP.ADD_PRINT_TEXT(290, 258, 100, 20, strNJSL); //内件数量
// LODOP.ADD_PRINT_TEXT(92, 245, 100, 20, strJJRDH); //寄件人电话
// LODOP.ADD_PRINT_TEXT(90, 608, 75, 20, strSJRDH); //收件人电话
// LODOP.ADD_PRINT_HTM(10,55,"100%","100%", document.getElementById('form1').innerHTML);
// },
以上代码是在vue中如何插入打印功能的代码，后边的参数变量如果可以取到行内数据的话直接写行内数据就完事了，具体的设计麻烦请看官方文档http://www.lodop.net/
