zoukankan      html  css  js  c++  java
  • vue-to-pdf的使用:vue中将div转换为pdf文件

    1.npm i vue-to-pdf --save

    2.main.js

    import vueToPdf from 'vue-to-pdf';
    Vue.use(vueToPdf);

    3.转化为pdf并下载

      注意:div中的图片需要在本地,线上图片需要转化为base64格式才能显示

        mounted() {
            this.$PDFSave(this.$refs['content'], '我的文件')    
        }  

    4.转化为pdf格式的file数据

    methods: {
            onHandle() {
                var promiseObj = this.$PDFOutput(this.$refs['box'])
                promiseObj.then((value) => {
                    this.httpRequest(value).then(res=>{
                        // value:bolburl
                        // res:file文件
                    })
                })
            },
            httpRequest(src) {
                let that = this
                return new Promise((resolve, reject) => {
                    let xhr = new XMLHttpRequest()
                    xhr.open('GET', src, true)
                    xhr.responseType = 'blob'
                    xhr.onload = function (e) {
                        if (this.status == 200) {
                            let myBlob = this.response
                            let files = new window.File(
                                [myBlob],
                                that.objData.prj_no + '.pdf',
                                { type: myBlob.type }
                            ) // myBlob.type 自定义文件名
                            resolve(files)
                        } else {
                            reject(false)
                        }
                    }
                    xhr.send()
                })
            },
        },
  • 相关阅读:
    ActionContext和ServletActionContext
    1.有Dao为什么还要Service?
    1.DBCP和CP30的区别
    设计模式之单例模式(java实现)
    DOM之练习2
    js之DOM练习题
    动态改变dom结构常用方法
    js 自动类型转换
    定位属性position
    html基础
  • 原文地址:https://www.cnblogs.com/jing-zhe/p/15402849.html
Copyright © 2011-2022 走看看