d***@163.com
d***@163.com
  • 发布:2023-10-16 10:58
  • 更新:2023-10-16 10:58
  • 阅读:328

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

分类:uni-app

问题:使用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 元素完全渲染完成后再进行图片的生成  
                });  
            },  
    }                
0 关注 分享

要回复文章请先登录注册