关于在uniapp中使用v-html渲染html字符串时，html字符串内容过多且html内容渲染出来后超出可视区域的解决方案

问题：使用v-html渲染html字符串时，html字符串内容过多且html内容渲染出来后超出可视区域

1. 在H5和app中解决方案
   在h5中可使用canvas是绘制生成图片实现，app是通过缩放实现，为了适配不同机型需要动态计算一个缩放比，且缩放原点为style="transform-origin: top left;
   • 下载 npm install html2canvas
   • 在渲染html的页面引入html2canvas

import html2canvas from 'html2canvas'

• 在template中编写

    <!-- #ifdef APP-PLUS -->  
    <view v-if="!ratioX" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <!-- #ifdef H5 -->  
    <view v-if="!pdfImage" id="contentToConvert" v-html="html" style="position: absolute; top: -10000rpx; left: -10000rpx;"></view>  
    <!-- #endif -->  
    <scroll-view scroll-y="true" scroll-with-animation="true" style="width: 100%; height: 100%; margin-top: 10rpx;">  
        <!-- #ifdef APP-PLUS -->  
        <view v-html="html" style="transform-origin: top left;" :style="{ 'transform': `scale(${ratioX})` }"></view>  
        <!-- #endif -->  
        <!-- #ifdef H5 -->  
        <img style="width: 100%; height: auto;" v-if="pdfImage" :src="pdfImage" alt="Rendered PDF"></img>  
        <!-- #endif -->  
    </scroll-view>

• 在data() {},中定义

    data() {  
            return {  
                html: null,  
                pdfImage: null,  
                ratioX: null,  
            };  
        },

• 重点：通过接口获得html字符串并且生成图片

  async onLoad(option) {  
            await this.getPrictOrder()  
        await this.$nextTick()  
       setTimeout(async () => {  
           // #ifdef H5  
       await this.convertToPDF()  
      // #endif  
      // #ifdef APP-PLUS  
      await this.toGetContentToConvert()  
      // #endif  
      }, 0)                                                                                                                                                     
  }         
  methods: {  
                    //计算ratioX，缩放比  
          toGetContentToConvert() {  
              let winInfo = uni.getSystemInfoSync();  
              const query = uni.createSelectorQuery().in(this);  
              query.select('#contentToConvert').boundingClientRect(data => {  
                  if (data.width === 0) {  
                      this.toGetContentToConvert()  
                      return  
                  }  
                  this.ratioX = winInfo.windowWidth / data.width  
              }).exec();  
          },  
          convertToPDF() {  
              return new Promise((resolve) => {  
                  setTimeout(() => {  
                      // #capture 就是我们要获取截图对应的 DOM 元素选择器  
                      html2canvas(document.getElementById('contentToConvert'), {  
                          useCORS: true, // 【重要】开启跨域配置  
                          allowTaint: true, // 允许跨域图片  
                      }).then((canvas) => {  
                          this.pdfImage = canvas.toDataURL('image/jpeg');  
                      });  
                      uni.hideLoading()  
                  }, 300); // 这里加上 300ms 的延迟是为了让 DOM 元素完全渲染完成后再进行图片的生成  
              });  
          },  
  }