zoukankan      html  css  js  c++  java
  • uni-app打印

    1.手机端调用window.print()方法无效,无论是在浏览器或者app中或者webview中,(可能有的手机浏览器可以)。

    2.uniapp app端无法直接获取dom元素,,没有document对象,可使用renderjs处理,在app中只能使用原生的html元素如button(在元素上添加点击事件)调用renderjs中的方法,在例如u-button中就调用无效

    在renderjs里需要调用 主js的saveImg方法,传值,因为在renderjs模块里无法获取uni对象,因此需要调用主js

    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链接,因此打印时设备应在同一网络下)

    <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>
    <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, //支持图片跨域
                         "950",
                        height: "1344"
                    }).then(function(canvas) {
                        var image = new Image();
                        let src = image.src = canvas.toDataURL("image/png");
               // 调用 service层的saveImg方法,传值,因为在renderjs模块里无法获取uni对象,因此需要调用主js

                ownerInstance.callMethod('saveImg', src)
              }); 
            }
          }
      }
    </script>
  • 相关阅读:
    操作SQL Server Mobile数据库的常用C#代码
    关于asp.net c#中对cookie的操作
    javascript的常用string操作——join,replace和replaceAll的实现
    类似google日历的web日历控件——FullCalendar
    javascript的常用string操作——join,replace和replaceAll的实现
    类似google日历的web日历控件——FullCalendar
    Axure RP 6.5中文汉化包及汉化方法
    在python中使用cx_Oracle模块出现“DLL Load failed”的处理方法
    在python中使用cx_Oracle模块出现“DLL Load failed”的处理方法
    Axure RP 6.5中文汉化包及汉化方法
  • 原文地址:https://www.cnblogs.com/BlingSun/p/15100148.html
Copyright © 2011-2022 走看看