uni-app打印

压力爷爷 發表於 2021-8-4 18:00:00

1.手机端调用window.print()方法无效，无论是在浏览器或者app中或者webview中，（可能有的手机浏览器可以）。
2.uniapp app端无法直接获取dom元素，，没有document对象，可使用renderjs处理，在app中只能使用原生的html元素如button(在元素上添加点击事件)调用renderjs中的方法，在例如u-button中就调用无效
<pre>在renderjs里需要调用主js的saveImg方法,传值,因为在renderjs模块里无法获取uni对象，因此需要调用主js</pre>
3.jspdf.js插件在手机端无法正常使用，在浏览器中时页面打不开，在app中页面能正常打开但下载pdf时一直下载失败。
最终解决方案：
uniapp的renderjs+html2canvas+后台转pdf+android原生打印插件(这个插件是在HBuilder的插件市场安装的，地址：https://ext.dcloud.net.cn/plugin?id=1633)
使用uniapp的renderjs，在renderjs里面调用html2canvas的页面转图片功能生成base64的图片，然后调用后台接口将base64图片转成pdf(本来这里是使用jspdf插件进行图片转pdf，但是在手机端这里一直无法正常转换，详情见3.)，
再调用uni的文件下载接口下载pdf文件，然后查看文件下载后在手机本地的存储路径，调用安卓原生打印插件（该插件只能打印pdf文件，且文件路径必须是本地绝对路径），连接打印机进行打印（打印机通过wlan链接，因此打印时设备应在同一网络下）
 
<div class="cnblogs_code">
<pre><button class="printBtn" type='primary' @click="renderTest.changeToImg1">打印</button>
<script>
import {
 loadPdf
} from '../../api/common.js'
import {
 baseUrl
} from '../../api/api.js'
const printPdf = uni.requireNativePlugin('YanYu-PrintPDF');
export default {
 data() {
 return {}
　　　　}， 　　　　methods:{
　　　　saveImg(src) {
 loadPdf({
 image: src
 }).then(res => {
 console.log(res.result) 
 uni.downloadFile({
 url: res.result,
 //url:"http://61.162.225.227:19000/wechat/static/direct.png",
 success: function(res) {
 console.log('save success-------');
 console.log(res)
 let base =
 "/storage/emulated/0/Android/data/store.yard.law/apps/__UNI__A6E30DD/"
 var savedFilePath = res.tempFilePath.substr(1);
 printPdf.managerPrint(base + savedFilePath);
 },
 fail(err) {
 console.log('save err-------------');
 console.log(err);
 }
 });
 })
 }
　　　　}
　} </script> </pre>
</div>
 
<div class="cnblogs_code">
<pre><script module="renderTest" lang="renderjs">
import html2canvas from 'html2canvas';

export default {
 data() {
 return {}
 },
 methods: {
 changeToImg1(event, ownerInstance) {
 var dom = document.querySelector("#dy"); // 获取dom元素 
 html2canvas(dom, {
 useCORS: true, //支持图片跨域
 width: "950",
 height: "1344"
 }).then(function(canvas) {
 var image = new Image();
 let src = image.src = canvas.toDataURL("image/png"); </pre>
<pre>　　　　　　　　　　　// 调用 service层的saveImg方法,传值,因为在renderjs模块里无法获取uni对象，因此需要调用主js 　　　　　　　　　　　　ownerInstance.callMethod('saveImg', src) </pre>
<pre>　　　　　　　　　　}); 　　　　　　　　} 　　　　　　} 　　} </script></pre>
</div>
  
来源：https://www.cnblogs.com/BlingSun/p/15100148.html

頁: [1]

琼殿技术论坛's Archiver

uni-app打印