美文网首页
uniapp 安卓生产pdf

uniapp 安卓生产pdf

作者: 小李不小 | 来源:发表于2023-05-22 15:32 被阅读0次
<template>
    <view class="content">
        <div class="reportInstrument">
                 <u-button 
                 :ripple="true"
                 style="width:100%;"
                 shape="circle"
                 @click="render.headelReport" 
                 type="primary">预览下载PDF</u-button>
        </div>
        
        <div id="printReport">
               
                    <view class="bold fs14  priceZj">
                        <view class="u-flex ">
                            <view class="w_30">小计:</view>
                            <view class="w_70">¥300000</view>
                        </view>
                       <view class="u-flex ">
                           <view class="w_30">销售税:</view>
                           <view class="w_70">¥1000</view>
                       </view> 
                       <view class="u-flex ">
                           <view class="w_30">运输和处理:</view>
                           <view class="w_70">¥30000</view>
                       </view>
                       <view class="u-flex ">
                          <view class="w_30">总计:</view>
                          <view class="w_70">¥09900</view>
                        </view>                       
                   </view>
                        
                </div>
                <u-gap height="100"></u-gap>
            </div>
        </div>
    </view>
</template>

<script>
    /**  
     * base64字符串转成文件
     * @param {String} base64Str // 允许包含前缀
     * @param {String} fileName // 文件名称:1663061363470.xlsx
     * @param {Object} callback  // 返回本地路径径URL,file:///xxx/doc/1663062980631.pdf
     */
    function base64ToFile(base64Str, fileName, callback) {
        // 去除base64前缀
        var index = base64Str.indexOf(',')
        var base64Str = base64Str.slice(index + 1, base64Str.length)
        plus.io.requestFileSystem(plus.io.PRIVATE_DOC, function(fs) {
            fs.root.getFile(fileName, {
                create: true
            }, function(entry) {
                // 获得本地路径URL,file:///xxx/doc/1663062980631.pdf
                var fullPath = entry.fullPath;

                let platform = uni.getSystemInfoSync().platform
                if (platform == 'android') {
                    var Base64 = plus.android.importClass("android.util.Base64");
                    var FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
                    try {
                        // console.log("base64Str: ", base64Str);
                        var out = new FileOutputStream(fullPath);
                        // 此处Base64.decode有长度限制,如果不能满足需求,可以考虑换成官方原生插件市场的【Base64转文件】
                        var bytes = Base64.decode(base64Str, Base64.DEFAULT);
                        // console.log("bytes: ", bytes);
                        if (!bytes) {
                            plus.nativeUI.toast("页面元素过多,超出生成限制,生成失败");
                            return false
                        } else {
                            out.write(bytes);
                            out.close();
                            // 回调  
                            callback && callback(entry.toLocalURL());
                        }
                    } catch (e) {
                        console.log(e.message);
                    }
                } else if (platform == 'ios') {
                    var NSData = plus.ios.importClass('NSData');
                    var nsData = new NSData();
                    nsData = nsData.initWithBase64EncodedStringoptions(base64Str, 0);
                    if (nsData) {
                        nsData.plusCallMethod({
                            writeToFile: fullPath,
                            atomically: true
                        });
                        plus.ios.deleteObject(nsData);
                    }
                    // 回调  
                    callback && callback(entry.toLocalURL());
                }
            })
        })
    }

    export default {
        data() {
            return {
                title: 'Hello',
                commodityList:[
                    {
                    'commodity':'   捷途大圣2023 ',
                    'specifications':'1',
                    'unitPrice':'40000',
                    'number':'2',
                    'price':'80000',
                    },
                    {
                    'commodity':'   捷途大圣2023 1',
                    'specifications':'1',
                    'unitPrice':'40000',
                    'number':'2',
                    'price':'80000',
                    }
                    ],
            }
        },
        onLoad() {

        },
        methods: {
            savePDF(base64) {
                uni.showLoading({
                    title: '导出中'
                });
                console.log('base64图片--',base64)
                var fileName = (new Date()).valueOf() + '.pdf';
                base64ToFile(base64, fileName, function(path) {
                    console.log('result', path);
                    uni.hideLoading()
                    uni.showModal({
                        title: '导出成功',
                        content: '文件地址:' + path +
                            '\n 是否打开?',
                        success: function(res) {
                            if (res.confirm) {
                                plus.runtime.openFile(path); //用第三方程序打开文件
                            } else if (res.cancel) {
                                console.log('用户点击取消');
                            }
                        }
                    });
                })
            }

        }
    }
</script>

<script module="render" lang="renderjs">
    import html2Canvas from 'html2canvas'
    import JsPDF from 'jspdf'
    export default {
        data() {
            return {

            }
        },
        mounted() {},
        methods: {
            headelReport(e, ownerVm) {
                html2Canvas(document.querySelector('#printReport'), {
                    allowTaint: false, //允许污染
                    taintTest: true, //在渲染前测试图片(没整明白有啥用)
                    useCORS: true, //使用跨域(当allowTaint为true时这段代码没什么用,下面解释)
                }).then(function(canvas) {
                    let contentWidth = canvas.width
                    let contentHeight = canvas.height
                    //一页pdf显示html页面生成的canvas高度;
                    let pageHeight = contentWidth / 592.28 * 841.89
                    //生成pdf的html页面高度
                    let leftHeight = contentHeight
                    //页面偏移
                    let position = 0
                    //a4纸的尺寸[595.28,841.89],html页面生成的canvas在pdf中图片的宽高
                    let imgWidth = 595.28
                    let imgHeight = 592.28 / contentWidth * contentHeight
                    // canvas.crossOrigin="anonymous";
                    let pageData = canvas.toDataURL('image/jpeg', 1.0);
                   
                    let 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()
                            }
                        }
                    }
                    var _this = this
                    plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'], function(e) {
                        if (e.deniedAlways.length > 0) { //权限被永久拒绝
                            // 弹出提示框解释为何需要读写手机储存权限,引导用户打开设置页面开启
                            uni.showModal({
                                title: '存储权限',
                                content: '您拒绝了存储权限,请去设置-应用开启存储权限。',
                                success: function(res) {
                                    if (res.confirm) {
                                        // console.log('用户点击确定');
                                    } else if (res.cancel) {
                                        // console.log('用户点击取消');
                                    }
                                }
                            });
                        }
                        if (e.deniedPresent.length > 0) { //权限被临时拒绝
                            // 弹出提示框解释为何需要读写手机储存权限,可再次调用plus.android.requestPermissions申请权限
                            plus.android.requestPermissions(['android.permission.WRITE_EXTERNAL_STORAGE'])
                            // console.log('666666666 ' + e.deniedPresent.toString());
                        }
                        if (e.granted.length > 0) { //权限被允许
                            //调用依赖获取读写手机储存权限的代码
                            let base64Str = PDF.output('dataurlstring');
                            // console.log("base64Str: ", base64Str);
                            ownerVm.callMethod('savePDF', base64Str)
                        }
                    }, function(e) {
                        // console.log('R12133313221' + JSON.stringify(e));
                    });
                })
            }
        }
    };
</script>

<style scoped lang="scss">
    
    .reportInstrument{
        position:fixed;
        width:100%;
        left: 0;
        bottom: 0;
    }
    .content{
        

        
        .w_20{width:20%;}
        .w_80{width: 80%;}
        .lawReportcontent{
            padding:30rpx;
            
            
            
            .headBg{
            
                background:rgb(95, 136, 255);
                padding:15rpx;
                color: #fff;}
            
            .ReportTitle{
                .bodborder{
                    background: #f7f7f7;
                    line-height:60rpx;
                    padding:10rpx;
                    }
                
                .w_50{width:50%;}
            }
            
        }
        
        .commodityany{
            line-height:50rpx;
            padding-top:15rpx;
            border-bottom:1px solid rgb(95,136,255);
            padding-bottom:15rpx;}
            .bold{font-weight:bold;}
            .c_red{color:red;}
            .b_blue{color:rgb(95,136,255);}
            
            .w_30{width:50%;}
            .w_70{width:50%;}
        
            
            .priceZj{
                background: rgb(93 ,158,230);
                color: #fff;
                line-height:45rpx;
                margin-top: 10rpx;
                padding: 20rpx;
            }
            
    }
</style>

相关文章

网友评论

      本文标题:uniapp 安卓生产pdf

      本文链接:https://www.haomeiwen.com/subject/fuvasdtx.html