项目场景：

前端日益发展，能处理的事情也越来越多。像导出Excel，导出PDF这些原本是由完全后端处理，前端只需调用一次接口的任务，现在的公司也有前端的实现方式。我们公司（vue项目）的实现方式是前端写一个多页面模板，请求后端（java）接口获取数据，再把模板页面路径作为参数传给后端（node.js）渲染返回PDF。

问题描述

模板页面路径难免携带一些复杂的参数，一些特殊字符序列化(JSON.stringify)以及编码(encodeURIComponent)之后会有编码问题。
简例：

let parmas = {
	columns: [
		{
			label: '表头',
			props: 'th',
			show: true
		}
	]
}
params  = encodeURIComponent(encodeSpecialChar(JSON.stringify(params)))
let url = `${location.protocol}//${host}/xxx.html?params=${params}`

原因分析：

url包含一些特殊的关键词，例如：# , & , =，而导致报错的是 % ，是因为编码汉字是 % 开头的，多加一个 % 会导致 decodeURIComponent 执行报错。

解决方案：

可以在参数序列化之后把特殊字符替换。

/**
 * 处理因为特殊字符导致的编码原因
 * @param {*} char 字符串
 * @returns
 */
export const encodeSpecialChar = (char) => {
  const encodeArr = [{
    code: '%',
    encode: '%25'
  }, {
    code: '?',
    encode: '%3F'
  }, {
    code: '#',
    encode: '%23'
  }, {
    code: '&',
    encode: '%26'
  }, {
    code: '=',
    encode: '%3D'
  }]
  return char.replace(/[%?#&=]/g, ($) => {
    for (const k of encodeArr) {
      if (k.code === $) {
        return k.encode
      }
    }
  })
}