vue页面导出pdf文档并上传pdf格式给后台

smallbench 2024-10-22
49 阅读 0 评论 0 点赞
  1. 下载依赖
    yarn add html2canvas // 将页面html转换成图片
    yarn add jspdf // 将图片生成pdf
  2. 定义全局函数，创建htmlToPdf.js文件
    1. import html2Canvas from ''html2canvas''
    2.  
    3. import JsPDF from ''jspdf''
    4.  
    5. export default {
    6.  
    7.     install(Vue, options) {
    8.  
    9.         Vue.prototype.getPdf = function (pdfFileName, isDownload, hide) {
    10.  
    11.             return new Promise((resolve, reject) => {
    12.  
    13.                 // this.$message.loading(''正在下载'', 2.5)
    14.  
    15.                 let ele = document.getElementById(''pdfDom'')
    16.  
    17.                 pdfFileName = pdfFileName || ''pdf''
    18.  
    19.                 window.pageYoffset = 0 // 滚动置顶
    20.  
    21.                 document.documentElement.scrollTop = 0
    22.  
    23.                 document.body.scrollTop = 0
    24.  
    25.                 html2Canvas(ele, {
    26.  
    27.                     allowTaint: true,
    28.  
    29.                     windowWidth: document.body.scrollWidth,
    30.  
    31.                     windowHeight: document.body.scrollHeight
    32.  
    33.                 }).then(canvas => {
    34.  
    35.                     // const _this = this
    36.  
    37.                     // 未生成pdf的html页面高度
    38.  
    39.                     var leftHeight = canvas.height
    40.  
    41.                     var a4Width = 555.28 // 原A4宽 592 因为要设置边距 20 ,这里要减掉 40
    42.  
    43.                     var a4Height = 801.89 // 原A4高   841 因为要设置边距 20 ,这里要减掉 40
    44.  
    45.                     // 一页pdf显示html页面生成的canvas高度;
    46.  
    47.                     var a4HeightRef = Math.floor(canvas.width / a4Width * a4Height)
    48.  
    49.  
    50.  
    51.                     // pdf页面偏移
    52.  
    53.                     var position = 0
    54.  
    55.  
    56.  
    57.                     var pageData = canvas.toDataURL(''image/jpeg'', 1.0)
    58.  
    59.  
    60.  
    61.                     var pdf = new JsPDF(''x'', ''pt'', ''a4'')
    62.  
    63.                     // let printIndex = 1
    64.  
    65.                     const canvas1 = document.createElement(''canvas'')
    66.  
    67.                     let height
    68.  
    69.                     pdf.setDisplayMode(''fullwidth'', ''continuous'', ''FullScreen'')
    70.  
    71.  
    72.  
    73.                     function createImpl(canvas) {
    74.  
    75.                         if (leftHeight > 0) {
    76.  
    77.                             // printIndex++
    78.  
    79.                             var checkCount = 0
    80.  
    81.                             if (leftHeight > a4HeightRef) {
    82.  
    83.                                 var i = position + a4HeightRef
    84.  
    85.                                 for (i = position + a4HeightRef; i >= position; i--) {
    86.  
    87.                                     var isWrite = true
    88.  
    89.                                     for (var j = 0; j < canvas.width; j++) {
    90.  
    91.                                         var c = canvas.getContext(''2d'').getImageData(j, i, 1, 1).data
    92.  
    93.  
    94.  
    95.                                         if (c[0] !== 0xff || c[1] !== 0xff || c[2] !== 0xff) {
    96.  
    97.                                             isWrite = false
    98.  
    99.                                             break
    100.  
    101.                                         }
    102.  
    103.                                     }
    104.  
    105.                                     if (isWrite) {
    106.  
    107.                                         checkCount++
    108.  
    109.                                         if (checkCount >= 10) {
    110.  
    111.                                             break
    112.  
    113.                                         }
    114.  
    115.                                     } else {
    116.  
    117.                                         checkCount = 0
    118.  
    119.                                     }
    120.  
    121.                                 }
    122.  
    123.                                 height = Math.round(i - position) || Math.min(leftHeight, a4HeightRef)
    124.  
    125.                                 if (height <= 0) {
    126.  
    127.                                     height = a4HeightRef
    128.  
    129.                                 }
    130.  
    131.                             } else {
    132.  
    133.                                 height = leftHeight
    134.  
    135.                             }
    136.  
    137.  
    138.  
    139.                             canvas1.width = canvas.width
    140.  
    141.                             canvas1.height = height
    142.  
    143.  
    144.  
    145.                             // console.log(index, ''height:'', height, ''pos'', position);
    146.  
    147.  
    148.  
    149.                             var ctx = canvas1.getContext(''2d'')
    150.  
    151.                             ctx.drawImage(canvas, 0, position, canvas.width, height, 0, 0, canvas.width, height) // 边距这里设置0，不然又黑边
    152.  
    153.  
    154.  
    155.                             // var pageHeight = Math.round(a4Width / canvas.width * height)
    156.  
    157.                             // pdf.setPageSize(null, pageHeight)
    158.  
    159.                             if (position !== 0) {
    160.  
    161.                                 pdf.addPage()
    162.  
    163.                             }
    164.  
    165.                             // 设置 20px 边距
    166.  
    167.                             pdf.addImage(canvas1.toDataURL(''image/jpeg'', 1.0), ''JPEG'', 20, 20, a4Width, a4Width / canvas1.width * height)
    168.  
    169.                             leftHeight -= height
    170.  
    171.                             position += height
    172.  
    173.                             if (leftHeight > 0) {
    174.  
    175.                                 // 添加全屏水印
    176.  
    177.                                 /* const base64 = ''data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAArCAYAAADIWo5HAAACLUlEQVR42u2Zy2sCMRDGV9tbtVJKrQ/0JBWLvbgsaOttQQqreO5R6GHP/v+HZiEDQ9i8k33YDHyXbcxufpN8maRRFCJEiBAhQoTgRIfoh+hKNBe0G9I2GVG3om9bEl2I9rcIoE/77Cq8Myd6sn2ZSBgAr80YARhI+gOwCdGW6EB/d6R9XDUGFrsAf2Fe7Fswk1JBmzMd1DNKgI2EywQyUKYjkxFeOwwxkwgAvBJNqEa0DzaTHcn3qWrXdA/ocQD8m11ABUDfQF0fpujjI2QAeoZetdYdfOzB9HgGNEF6owM8Ec3Q8wEDgP07T6ktgNyB8YgAqGZ0b+gRsS2AtQP/iAUAHlAdsEW7TY6eFVrVNQN8A2AjlZho5R5wYjJhoqMiADy4DFWLPJMcKBhv3AYThFi4yJyrAAAfDrY/1SVQVhLDOWDowIwzSQ1TqwfA1P5CU3yJlsPY8fmjcTMgptmeIwB3aFbsLCvM2BRAFR4AZXYxuEdmn38hmjoosY0B5IonxLNhIYTNby0odMoAJJL1/k10bwpgQztZKaxb2YXFRnAUhexDHzoAUsGxu3j+awNA5+RmcxW1UCx1eQB4SyI1AaBrbiMEYGrwexgYBlgrgGtU/ZUY3AlGhgByTvV5MQGgW1SomqBOUWLiATy1wgNsABQz51PzWHxTALzWAW0F0EM+MKPmnLj6x0lbAPDuC5zfNPsCcChZ25DZd4VBJCW7wrRp1+whQoQIESJEg+IPRa38G55TPkQAAAAASUVORK5CYII=''
    178.  
    179.                                 for (let i=0;i<6;i++) {
    180.  
    181.                                   for (let j=0;j<5;j++) {
    182.  
    183.                                     const  left = (j * 120) + 20
    184.  
    185.                                     pdf.addImage(base64,''JPEG'', left, i*150, 20, 30); // 关掉水印
    186.  
    187.                                   }
    188.  
    189.                                 } */
    190.  
    191.                                 setTimeout(createImpl, 0, canvas)
    192.  
    193.                             } else {
    194.  
    195.                                 pdf.save(pdfFileName + ''.pdf'')
    196.  
    197.                                 setTimeout(hide, 0)
    198.  
    199.                                 if (isDownload) {
    200.  
    201.                                     var pdfData = pdf.output(''datauristring'')//获取base64Pdf
    202.  
    203.                                     resolve(pdfData)
    204.  
    205.                                 }
    206.  
    207.                                 // this.$message.success(''下载完成'', 2.5)
    208.  
    209.                             }
    210.  
    211.                         }
    212.  
    213.                     }
    214.  
    215.  
    216.  
    217.                     // 当内容未超过pdf一页显示的范围，无需分页
    218.  
    219.                     if (leftHeight < a4HeightRef) {
    220.  
    221.                         pdf.addImage(pageData, ''JPEG'', 20, 20, a4Width, a4Width / canvas.width * leftHeight)
    222.  
    223.                         pdf.save(pdfFileName + ''.pdf'')
    224.  
    225.                         if (isDownload) {
    226.  
    227.                             var pdfData = pdf.output(''datauristring'')//获取base64Pdf
    228.  
    229.                             resolve(pdfData)
    230.  
    231.                         }
    232.  
    233.                     } else {
    234.  
    235.                         try {
    236.  
    237.                             pdf.deletePage(0)
    238.  
    239.                             setTimeout(createImpl, 0, canvas)
    240.  
    241.                         } catch (err) {
    242.  
    243.                             console.log(err)
    244.  
    245.                         }
    246.  
    247.                     }
    248.  
    249.                 })
    250.  
    251.             })
    252.  
    253.         }
    254.  
    255.     }
    256.  
    257. }

  4. 在main.js中使用 
     
    1. import htmlToPdf from ''@/components/htmlToPdf/htmlToPdf''
    2.  
    3.  
    4. Vue.use(htmlToPdf)
     
     
  5.  
    1. <template>
    2.   <div class="row" id="pdfDom" style="padding-top: 55px;background-color:#fff;">
    3.     //pdf想要展示的内容
    4.   </div>
     
     
  6.  
    1. <div class="flex itemcenten jucem">
    2.  
    3.       <el-button
    4.  
    5.         @click="htmlToPdf"
    6.  
    7.         type="primary"
    8.  
    9.         >下载报告</el-button
    10.  
    11.       >
    12.  
    13.     </div>
    14.  
    15. </template>
    16. <script>
    17. export default {
    18.   data () {
    19.     return {}
    20.   },
    21.   method: {
    22.    
    23.  
    24. //上传pdf接口
    25.  
    26.     UploadPdf(res) {
    27.  
    28.       //res拿到base64的pdf
    29.  
    30.       let pdfBase64Str = res;
    31.  
    32.       let title = "上传给后端的个人报告";
    33.  
    34.       var myfile = this.dataURLtoFile(pdfBase64Str, title + ".pdf"); //调用一下下面的转文件流函数
    35.  
    36.       var formdata = new FormData();
    37.  
    38.       formdata.append("file", myfile); // 文件对象
    39.  
    40.       console.log(formdata);
    41.  
    42.       uploadAsync(formdata, this.isLookItem.record.id)
    43.  
    44.         .then((res) => {
    45.  
    46.           console.log("上传pdf接口", res);
    47.  
    48.         })
    49.  
    50.         .catch((err) => {
    51.  
    52.           console.log("上传pdf接口", err);
    53.  
    54.         });
    55.  
    56.     },
    57.  
    58.     dataURLtoFile(dataurl, filename) {
    59.  
    60.       var arr = dataurl.split(","),
    61.  
    62.         mime = arr[0].match(/:(.*?);/)[1],
    63.  
    64.         bstr = atob(arr[1]),
    65.  
    66.         n = bstr.length,
    67.  
    68.         u8arr = new Uint8Array(n);
    69.  
    70.       while (n--) {
    71.  
    72.         u8arr[n] = bstr.charCodeAt(n);
    73.  
    74.       }
    75.  
    76.       return new File([u8arr], filename, { type: mime });
    77.  
    78.     },
    79.  
    80.  
    81.  
    82.     toGetPdf(val, download) {
    83.  
    84.       this.$nextTick(() => {
    85.  
    86.         setTimeout(() => {
    87.  
    88.           window.scrollTo(0, 0);
    89.  
    90.           let title = "个人报告";
    91.  
    92.           this.getPdf(title, download).then((res) => {
    93.  
    94.             if (val) {
    95.  
    96.               this.UploadPdf(res);
    97.  
    98.             } else {
    99.  
    100.               console.log("不上传");
    101.  
    102.             }
    103.  
    104.           });
    105.  
    106.         }, 1000);
    107.  
    108.       });
    109.  
    110.     },
    111.  
    112.  
    113.  
    114.     htmlToPdf() {
    115.  
    116.       if (
    117.  
    118.         this.isLookItem.record.download_url == null ||
    119.  
    120.         this.isLookItem.record.download_url == ""
    121.  
    122.       ) {
    123.  
    124.         this.toGetPdf(true, true);
    125.  
    126.       } else {
    127.  
    128.         this.toGetPdf(false, false);
    129.  
    130.       }
    131.  
    132.       const loading = this.$loading({
    133.  
    134.         lock: true,
    135.  
    136.         text: "下载中，请稍后",
    137.  
    138.         spinner: "el-icon-loading",
    139.  
    140.         background: "rgba(0, 0, 0, 0.7)",
    141.  
    142.       });
    143.  
    144.       setTimeout(() => {
    145.  
    146.         loading.close();
    147.  
    148.       }, 7000);
    149.  
    150.     },
    151.  
    152.  
    153.   }
    154. }
    155. </script>
     
     

                
									

								


								
								

									标签：
									技术社区
								


								
								

									
									
									
								


								
								

									
相关文章