studytour-front/pages/index/index.vue

<template>
  <div id="app" class="page__view">

		<div class="card">
			<div class="report" :style="style">
				<!-- 01 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_01" crossorigin=“anonymous />
				</view>
				<!-- 02 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_02" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block; position: relative;" src="@/static/image/page-02.png" crossorigin=“anonymous />
					<img style="display: block; position: absolute; top: 122rpx; left: 144rpx; width: 132rpx; height: 165rpx;" src="@/static/image/temp-14.png" crossorigin=“anonymous />
				</view>
				<!-- 03 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_03" crossorigin=“anonymous />
				</view>
				<!-- 04 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_04" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block;" src="@/static/image/page-04.png" crossorigin=“anonymous />
				</view>
				<!-- 05 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_05" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block;" src="@/static/image/page-05.png" crossorigin=“anonymous />
				</view>
				<!-- 06 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_06" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block;" src="@/static/image/page-06.png" crossorigin=“anonymous />
				</view>
				<!-- 07 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_07" crossorigin=“anonymous />
				</view>
				<!-- 08 -->
				<view class="export">
					<img class="fg fg-08" style="display: block;" :src="configList.report_page_08" crossorigin=“anonymous />
				</view>
				<!-- 09 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_09" crossorigin=“anonymous />
				</view>
				<!-- 10 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_10" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block;" src="@/static/image/page-10.png" crossorigin=“anonymous />
				</view>
				<!-- 11 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_11" crossorigin=“anonymous />
				</view>
				<!-- 12 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_12" crossorigin=“anonymous />
				</view>
				<!-- 13 -->
				<view class="export">
					<!-- <img class="fg" style="display: block;" :src="configList.report_page_13" crossorigin=“anonymous /> -->
					<img class="fg" style="display: block;" src="@/static/image/page-13.png" crossorigin=“anonymous />
				</view>
				<!-- 14 -->
				<view class="export">
					<img class="fg" style="display: block;" :src="configList.report_page_14" crossorigin=“anonymous />
				</view>
			</div>
		</div>
    
		<img v-if="current > 0" class="turn left" style="display: block;" src="@/static/image/icon-left.png" @click="prev" />
		<img v-if="current < 13" class="turn right" style="display: block;" src="@/static/image/icon-right.png" @click="next" />

    <div class="flex bottom">
      <button class="btn" @click="createPdf">生成pdf</button>
    </div>

  </div>
</template>

<script>
  import html2canvas from 'html2canvas'
  import { jsPDF } from "jspdf";

  export default {
    data() {
      return {
        id: null,
        details: {},
				current: 0,
      }
    },
		computed: {
			style() {
				
				return `transform: translateX(calc(-${this.current}*(100vw - 24rpx * 2)))`
			},
		},
    onLoad(arg) {
      document.addEventListener('UniAppJSBridgeReady', function() {
        console.log('UniAppJSBridgeReady', uni)
        uni.getEnv(function(res) {
            console.log('当前环境：' + JSON.stringify(res));
        });
      })
      
      const { id, token } = arg
      token && uni.setStorageSync('token', token)
      this.id = id
    },
    mounted() {
      this.getData(this.id)
    },
    methods: {
      getData(id) {
				// todo
      },
			prev() {
				this.current -= 1
			},
			next() {
				this.current += 1
			},
      createPdf() {

				uni.showLoading({
					title: '生成中...'
				})

        console.log('createPdf')

        const fillPage = () => {

          // 设置背景色
          PDF.setFillColor(251, 254, 255); // 例如，红色背景 

          // 绘制一个填充的矩形覆盖整个页面
          PDF.rect(0, 0, PDF.internal.pageSize.getWidth(), PDF.internal.pageSize.getHeight(), 'F'); // 'F'表示填充
          
        }

        let PDF = new jsPDF('l', 'pt', 'a4')
        console.log('PDF', PDF)
        console.log('size', PDF.internal.pageSize.getWidth(), PDF.internal.pageSize.getHeight())
        const WIDTH = PDF.internal.pageSize.getWidth() // 841.89 
        const HEIGHT = PDF.internal.pageSize.getHeight() // 595.28


        let request = [] 
        let nodeList = document.querySelectorAll('.export')
        for(let i = 0; i < nodeList.length; i++) {
          request.push(html2canvas(nodeList[i], { allowTaint: true, useCORS: true, }))
        }

        return Promise.allSettled(request).then(res => {
          console.log('res', res)

          fillPage()

          res.forEach((item, index) => {
            if (index > 0) {
              PDF.addPage()
              fillPage()
            }
            const canvas = item.value
            let pageData = canvas.toDataURL('image/jpeg', 1.0)
            PDF.addImage(pageData, 'JPEG', 0, 0, WIDTH, HEIGHT)

          })
          
          // #ifdef H5

          console.log('env: h5')
          PDF.save('测试生成pdf' + '.pdf');  //h5在这就可以保存pdf

          // #endif
        
					return

          uni.postMessage({
              data: {
                imageData: PDF.output("datauristring"),
              }
          });

          // uni.navigateBack()
          uni.redirectTo({
				    url: `/pages_order/thesis/createPdf?id=${this.id}`
          })

        }).catch(err => {
          console.log('err', err)
        }).finally(() => {
					uni.hideLoading()
				})

      },
    }
  }
</script>

<style lang="scss" scoped>

	$pages: 14;
	$w: calc(100vw - 24rpx * 2);
	$h: calc(#{$w} / 841.89 * 595.28);

  .page__view {
    width: 100vw;
    min-height: 100vh;
		background: #F7F8FA;
    position: relative;
		// padding-top: 137rpx;
		box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
  }

	.card {
		position: absolute;
		top: 50vh;
		transform: translateY(-50%);
		width: $w;
		margin: 0 24rpx;
    padding: 250rpx 0;
    overflow: hidden;
		background: #FFFFFF;
	}

	.report {
		width: calc(#{$pages}*#{$w});
		height: auto;
		overflow-x: visible;
	}

	.export {
		position: relative;
		display: inline-block;
		width: $w;
		min-height: $h;
	}

	.fg {
		position: absolute;
		top: 0;
		left: 0;
		width: $w;
		height: auto;

		&-08 {
			width: auto;
			height: $h;
		}
	}

  // .export__view {
  //   position: fixed;
  //   top: 100vh;
  // }

	.turn {
		width: 80rpx;
		height: 80rpx;
		position: fixed;
		top: 50vh;
		transform: translateY(-50%);

		&.left {
			left: 0;
		}
		&.right {
			right: 0;
		}
	}

  .bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100vw;
		background: #FFFFFF;
		box-sizing: border-box;
    padding: 32rpx 40rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);
    box-sizing: border-box;

    .btn {
      width: 100%;
      padding: 14rpx 0;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #FFFFFF;
      background: linear-gradient(to right, #21FEEC, #019AF9);
      border: 2rpx solid #00A9FF;
      border-radius: 41rpx;
    }

	}
</style>