vue混合開發(fā)模式下的原生(移動端)導(dǎo)出前端生成的PDF

思路:

1.H5使用html2Canvas和jsPDF把生成的excel文件通過上傳接口上傳到服務(wù)器粘茄,并獲取地址
2.手機端原生提供一個方法秕脓,然后調(diào)用原生方法瘪菌,H5給原生一個線上url地址嘹朗,原生方法使用自帶的瀏覽器打開這個url地址诵肛,從而訪問并自動下載這個文件

實現(xiàn):

1.總之先把下面兩個方法放進methods里

dataURLtoFile(dataurl, filename) {
      // 生成Blob
      var arr = dataurl.split(",");
      var mime = arr[0].match(/:(.*?);/)[1];
      var bstr = atob(arr[1]);
      var n = bstr.length;
      var u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
 },
createDownloadFile(fileName, file) {
      const blob = this.dataURLtoFile(`${file}`, fileName);
      blob.lastModifiedDate = new Date();
      blob.name = fileName;
      return blob;
},

2.把正常導(dǎo)出pdf的最后一行怔檩,PDF.save()方法刪掉,換成下面的內(nèi)容

 var _this=this
 //轉(zhuǎn)成base64
 let pdf64 = PDF.output("datauristring");
 //base64轉(zhuǎn)成blob文件
 let path = _this.createDownloadFile("報表", pdf64);
 //上傳到服務(wù)器
 let formdata = new FormData();
 //第三個參數(shù)傳一個不一定會用到的文件名媒吗,但是得有乙埃。注意后綴
 formdata.append("file", path, "報表.pdf");
//調(diào)上傳接口,這里因為我封裝了axios增加了攔截器甫何,所以是下面的寫法遇伞,這里根據(jù)各位的上傳方法不同,自行修改
 request({
            url: _this.url + _this.curVersion + "/SysFile/uploadImg",
            method: "post",
            data: formdata,
          }).then((res) => {
//拼接文件線上地址
            let path =
              _this.url + res.data.data.filePath + res.data.data.fileName;
//調(diào)用安卓或者ios提供的方法巍耗,打開瀏覽器
            Android.openBrowser(path);
  });

3.在移動端點擊導(dǎo)出時渐排,會調(diào)用接口獲取線上地址,然后彈出移動端的選擇瀏覽器娄琉,打開瀏覽器以后會彈出下載提示吓歇。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末城看,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子测柠,更是在濱河造成了極大的恐慌,老刑警劉巖谒主,帶你破解...
    沈念sama閱讀 217,185評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件霎肯,死亡現(xiàn)場離奇詭異,居然都是意外死亡搂捧,警方通過查閱死者的電腦和手機懂缕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評論 3 393
  • 文/潘曉璐 我一進店門搪柑,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人拌屏,你說我怎么就攤上這事倚喂。” “怎么了端圈?”我有些...
    開封第一講書人閱讀 163,524評論 0 353
  • 文/不壞的土叔 我叫張陵舱权,是天一觀的道長。 經(jīng)常有香客問我张症,道長鸵贬,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,339評論 1 293
  • 正文 為了忘掉前任兆衅,我火速辦了婚禮,結(jié)果婚禮上羡亩,老公的妹妹穿的比我還像新娘畏铆。我一直安慰自己,他們只是感情好辞居,可當(dāng)我...
    茶點故事閱讀 67,387評論 6 391
  • 文/花漫 我一把揭開白布速侈。 她就那樣靜靜地躺著迫卢,像睡著了一般。 火紅的嫁衣襯著肌膚如雪每界。 梳的紋絲不亂的頭發(fā)上家卖,一...
    開封第一講書人閱讀 51,287評論 1 301
  • 那天上荡,我揣著相機與錄音趴樱,去河邊找鬼。 笑死酪捡,一個胖子當(dāng)著我的面吹牛叁征,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播逛薇,決...
    沈念sama閱讀 40,130評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼捺疼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了永罚?” 一聲冷哼從身側(cè)響起啤呼,我...
    開封第一講書人閱讀 38,985評論 0 275
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎呢袱,沒想到半個月后官扣,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,420評論 1 313
  • 正文 獨居荒郊野嶺守林人離奇死亡产捞,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,617評論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片焊唬。...
    茶點故事閱讀 39,779評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡恋昼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出赶促,到底是詐尸還是另有隱情液肌,我是刑警寧澤,帶...
    沈念sama閱讀 35,477評論 5 345
  • 正文 年R本政府宣布鸥滨,位于F島的核電站嗦哆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏婿滓。R本人自食惡果不足惜老速,卻給世界環(huán)境...
    茶點故事閱讀 41,088評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望凸主。 院中可真熱鬧橘券,春花似錦、人聲如沸卿吐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽嗡官。三九已至箭窜,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間衍腥,已是汗流浹背磺樱。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留婆咸,地道東北人坊罢。 一個月前我還...
    沈念sama閱讀 47,876評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像擅耽,于是被迫代替她去往敵國和親活孩。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,700評論 2 354

推薦閱讀更多精彩內(nèi)容