使用window.open()打开新窗口时携带数据（较长数据）_ 浏览器对url长度限制 _ 不同编码方式 - 字符与字节对应关系不同

问题描述

• 业务需求：当前窗口跳转到新窗口，跳转时要携带 base64格式数据，打开新窗口后显示携带的base64格式数据图片。
• 问题：打开新窗口后携带的base64格式图片显示不出来

使用 window.open() 打开新窗口出现的问题及解决

• 【常规携带参数 - 有问题】
  • 打开新窗口直接用 window.open() ，地址拼接传参

    // 打开新窗口（res.data 为base64格式字符串）
    window.open('/#/print-preview-web?src=' + res.data)
    

  • 新窗口展示base64格式图片（图片显示不出来）

    <!-- 在新窗口中显示图片 -->
    <img :src="'data:image/jpeg;base64,' + printPreviewPic" alt="" />
    

    this.printPreviewPic = this.$route.query.src // 从url地址中取出携带的base64格式图片字符串
    

• 【window['filter'] - 解决传参过长问题】
  • 打开新窗口使用 window.open() 借助 window['filter'] 传参

    // 打开新窗口携带的数据【主要代码】
    window['filter'] = {
    src: res.data  // res.data 为base64格式字符串
    }
    // 打开打印预览窗口
    // window.open('/#/print-preview-web?src=' + res.data) // 【直接拼接会有问题】
    window.open('/#/print-preview-web')
    

  • 打开 新窗口 显示base64格式图片

    <!-- 在新窗口中显示图片 -->
    <img :src="'data:image/jpeg;base64,' + printPreviewPic" alt="" />
    

    // this.printPreviewPic = this.$route.query.src
    // this.printPreviewPic = this.$route.query.src.replace(/\s/g, encodeURIComponent(' ')) // 可能是空格影响的？转义一下（没有什么用）
    this.printPreviewPic = window.opener['filter'].src // 【主要代码】
    

base64图片显示不出来原因

• 浏览器对 url 地址长度有限制，base64格式图片字符串太太太长了，有影响
  • 随便找了一个图片转为base64格式之后长度有 178379 字符，而浏览器地址栏传参长度有限制（同一字符串不同编码方式编码出的大小不一样，而且每个浏览器限制长度也不一样，之后再列举）

各个浏览器对url长度限制如下

1. IE浏览器对URL的长度现限制为2048字节(自己测试最多为2047字节)。
2. 360极速浏览器对URL的长度限制为2118字节。
3. Firefox(Browser)对URL的长度限制为65536字节。
4. Safari(Browser)对URL的长度限制为80000字节。
5. Opera(Browser)对URL的长度限制为190000字节。
6. Google(chrome)对URL的长度限制为8182字节。
7. URL最大长度问题 - 网上英文资料
   （来源 博客）

不同编码方式 - 字符与字节对应关系不同

常见的编码字符与字节的对应关系如下：

1. ASCII码中，一个英文字母（不分大小写）占一个字节的空间，一个中文汉字占两个字节的空间。一个二进制数字序列，在计算机中作为一个数字单元，一般为8位二进制数，换算为十进制。最小值0，最大值255。
2. UTF-8编码中，一个英文字符等于一个字节，一个中文（含繁体）等于三个字节。
3. Unicode编码中，一个英文等于两个字节，一个中文（含繁体）等于两个字节。
   符号：英文标点占一个字节，中文标点占两个字节。举例：英文句号“.”占1个字节的大小，中文句号“。”占2个字节的大小。
4. GBK编码方式是中文占两个字节，英文占1个字节。
   （来源 baidu）