vue-to-pdf的使用：vue中将div转换为pdf文件

微微上扬的嘴角丶

于 2024-08-09 09:47:52 发布

阅读量188

点赞数 3

文章标签：前端 javascript

本文链接：https://blog.csdn.net/on1yLX/article/details/140960512

版权

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()
            })
        },
    },