項目場景：

前端日益發(fā)展，能處理的事情也越來越多。像導出Excel，導出PDF這些原本是由完全后端處理，前端只需調(diào)用一次接口的任務，現(xiàn)在的公司也有前端的實現(xiàn)方式。我們公司（vue項目）的實現(xiàn)方式是前端寫一個多頁面模板，請求后端（java）接口獲取數(shù)據(jù)，再把模板頁面路徑作為參數(shù)傳給后端（node.js）渲染返回PDF。

問題描述

模板頁面路徑難免攜帶一些復雜的參數(shù)，一些特殊字符序列化(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包含一些特殊的關(guān)鍵詞，例如：# , & , =，而導致報錯的是 % ，是因為編碼漢字是 % 開頭的，多加一個 % 會導致 decodeURIComponent 執(zhí)行報錯。

解決方案：

可以在參數(shù)序列化之后把特殊字符替換。

/**
 * 處理因為特殊字符導致的編碼原因
 * @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
      }
    }
  })
}