vue實(shí)現(xiàn)文件下載

文件下載有很多種方式，本文主要介紹7種拙泽。

一、a標(biāo)簽下載

<body>
  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">a標(biāo)簽下載</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
     /**
       * download的屬性是HTML5新增的屬性
       * href屬性的地址必須是非跨域的地址裸燎，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目(調(diào)用后臺(tái)的接口)顾瞻，這時(shí)download就會(huì)不起作用。
       * 此時(shí)德绿，如果是下載瀏覽器無(wú)法解析的文件荷荤，例如.exe,.xlsx..那么瀏覽器會(huì)自動(dòng)下載，但是如果使用瀏覽器可以解析的文件脆炎，比如.txt,.png,.pdf....瀏覽器就會(huì)采取預(yù)覽模式
       * 所以梅猿，對(duì)于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream，如果為application/pdf瀏覽器則會(huì)判斷文件為 pdf 秒裕，自動(dòng)執(zhí)行預(yù)覽的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    }
  </script>
</body>

優(yōu)點(diǎn)：

  • 可以下載txt、png钞啸、pdf等類(lèi)型文件
  • download的屬性是HTML5新增的屬性
    href屬性的地址必須是非跨域的地址几蜻，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目(調(diào)用后臺(tái)的接口)，這時(shí)download就會(huì)不起作用体斩。 此時(shí)梭稚，如果是下載瀏覽器無(wú)法解析的文件，例如.exe,.xlsx..那么瀏覽器會(huì)自動(dòng)下載絮吵，但是如果使用瀏覽器可以解析的文件弧烤，比如.txt,.png,.pdf....瀏覽器就會(huì)采取預(yù)覽模式；所以蹬敲，對(duì)于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream暇昂，如果為application/pdf瀏覽器則會(huì)判斷文件為 pdf ，自動(dòng)執(zhí)行預(yù)覽的策略)

缺點(diǎn)：

  • a標(biāo)簽只能做get請(qǐng)求伴嗡，所有url有長(zhǎng)度限制
  • 無(wú)法獲取下載進(jìn)度
  • 無(wú)法在header中攜帶token做鑒權(quán)操作
  • 跨域限制
  • 無(wú)法判斷接口是否返回成功
  • IE兼容問(wèn)題

二急波、form標(biāo)簽下載

圖2-1
<body>
  <button onclick="inputDownloadEvt('get', 'http://192.168.66.183:13666/download', 'name', 'HAP.pdf')">form標(biāo)簽下載</button>
  <script>
    /**
     * @param {String} method - 請(qǐng)求方法get/post
     * @param {String} url
     * @param {String} paramsKey - 請(qǐng)求參數(shù)名
     * @param {String} paramsValue - 請(qǐng)求參數(shù)值
    */
    function inputDownloadEvt(method, url, paramsKey, paramsValue) {
      const form = document.createElement('form');
      form.style.display = 'none';
      form.setAttribute('target', '_blank');
      form.setAttribute('method', method);
      form.setAttribute('action', url);
      const input = document.createElement('input');
      input.setAttribute('type','hidden');
      // 對(duì)于get請(qǐng)求 最終會(huì)拼成http://192.168.66.183:13666/download?name=HAP.pdf
      input.setAttribute('name', paramsKey);
      input.setAttribute('value', paramsValue);
      form.appendChild(input);
      document.body.appendChild(form);
      form.submit();
      document.body.removeChild(form);
    }
  </script>
</body>

優(yōu)點(diǎn)

  • 兼容性好，不會(huì)出現(xiàn)URL長(zhǎng)度限制問(wèn)題
  • form標(biāo)簽get和post都可以

缺點(diǎn)

  • 無(wú)法獲取下載進(jìn)度
  • 無(wú)法在header中攜帶token做鑒權(quán)操作
  • 無(wú)法直接下載瀏覽器可直接預(yù)覽的文件類(lèi)型（txt瘪校、png澄暮、pdf會(huì)直接預(yù)覽）
  • 無(wú)法判斷接口是否返回成功

三、window.open下載

<body>
  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">window.open下載</button>
  <script>
    function downloadEvt(url) {
      window.open(url, '_self');
    }
  </script>
</body>

優(yōu)點(diǎn)

  • 簡(jiǎn)單方便直接

缺點(diǎn)

  • 會(huì)出現(xiàn)URL長(zhǎng)度限制問(wèn)題
  • 需要注意url編碼問(wèn)題
  • 無(wú)法獲取下載進(jìn)度
  • 無(wú)法在header中攜帶token做鑒權(quán)操作
  • 無(wú)法直接下載瀏覽器可直接預(yù)覽的文件類(lèi)型（txt阱扬、png泣懊、pdf會(huì)直接預(yù)覽）
  • 無(wú)法判斷接口是否返回成功

四、iframe下載

<body>
  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">iframe下載</button>
  <script>
    // 批量下載時(shí)麻惶，動(dòng)態(tài)創(chuàng)建a標(biāo)簽馍刮，會(huì)始終只下載一個(gè)文件，改為動(dòng)態(tài)創(chuàng)建iframe標(biāo)簽
    function downloadEvt(url) {
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = url;
      document.body.appendChild(iframe);
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 200);
    }
  </script>
</body>

優(yōu)點(diǎn)

  • 可以下載txt用踩、png渠退、pdf等類(lèi)型文件

缺點(diǎn)

  • 無(wú)法獲取下載進(jìn)度
  • 無(wú)法在header中攜帶token做鑒權(quán)操作
  • 無(wú)法判斷接口是否返回成功
  • 兼容忙迁、性能差

五、location.href下載

<body>
  <button onclick="downloadEvt('http://192.168.66.183:13666/download?name=HAP.pdf')">location.href下載</button>
  <script>
    function downloadEvt(url) {
      window.location.href = url;
    }
  </script>
</body>

優(yōu)點(diǎn)

  • 簡(jiǎn)單方便直接
  • 可以下載大文件(G以上)

缺點(diǎn)

  • 會(huì)出現(xiàn)URL長(zhǎng)度限制問(wèn)題
  • 需要注意url編碼問(wèn)題
  • 無(wú)法獲取下載進(jìn)度
  • 無(wú)法在header中攜帶token做鑒權(quán)操作
  • 無(wú)法直接下載瀏覽器可直接預(yù)覽的文件類(lèi)型（txt碎乃、png姊扔、pdf會(huì)直接預(yù)覽）
  • 無(wú)法判斷接口是否返回成功

六、ajax下載（Blob - 利用Blob對(duì)象生成Blob URL）

如果后端需要做token驗(yàn)證梅誓，那么a恰梢、form、iframe梗掰、window.open嵌言、location.href都無(wú)法在header中攜帶token，這時(shí)候可以使用ajax來(lái)實(shí)現(xiàn)及穗。

<body>
  <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下載</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
     /**
       * download的屬性是HTML5新增的屬性
       * href屬性的地址必須是非跨域的地址摧茴，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目(調(diào)用后臺(tái)的接口)，這時(shí)download就會(huì)不起作用埂陆。
       * 此時(shí)苛白，如果是下載瀏覽器無(wú)法解析的文件，例如.exe,.xlsx..那么瀏覽器會(huì)自動(dòng)下載焚虱，但是如果使用瀏覽器可以解析的文件购裙，比如.txt,.png,.pdf....瀏覽器就會(huì)采取預(yù)覽模式
       * 所以，對(duì)于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream鹃栽，如果為application/pdf瀏覽器則會(huì)判斷文件為 pdf 躏率，自動(dòng)執(zhí)行預(yù)覽的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    };

    // 根據(jù)header里的contenteType轉(zhuǎn)換請(qǐng)求參數(shù)
    function transformRequestData(contentType, requestData) {
      requestData = requestData || {};
      if (contentType.includes('application/x-www-form-urlencoded')) {
        // formData格式：key1=value1&key2=value2，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是對(duì)于數(shù)組參數(shù)的處理
        let str = '';
        for (const key in requestData) {
          if (Object.prototype.hasOwnProperty.call(requestData, key)) {
            str += `${key}=${requestData[key]}&`;
          }
        }
        return encodeURI(str.slice(0, str.length - 1));
      } else if (contentType.includes('multipart/form-data')) {
        const formData = new FormData();
        for (const key in requestData) {
          const files = requestData[key];
          // 判斷是否是文件流
          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
          if (isFile) {
            for (let i = 0; i < files.length; i++) {
              formData.append(key, files[i]);
            }
          } else {
            formData.append(key, files);
          }
        }
        return formData;
      }
      // json字符串{key: value}
      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
    }
    /**
     * ajax實(shí)現(xiàn)文件下載民鼓、獲取文件下載進(jìn)度
     * @param {String} method - 請(qǐng)求方法get/post
     * @param {String} url
     * @param {Object} [params] - 請(qǐng)求參數(shù)薇芝，{name: '文件下載'}
     * @param {Object} [config] - 方法配置
     */
     function downLoadAjaxEvt(method = 'get', url, params, config) {
      const _method = method.toUpperCase();
      const _config = Object.assign({
        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 請(qǐng)求頭類(lèi)型
        fileName: '未知文件',                                        // 下載文件名(必填，若為空摹察，下載下來(lái)都是txt格式)
        async: true,                                                // 請(qǐng)求是否異步-true異步恩掷、false同步
        token: 'token'                                              // 用戶token
      }, config);

      const queryParams = transformRequestData(_config.contentType, params);
      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;

      const ajax = new XMLHttpRequest();
      ajax.open(_method, _url, _config.async);
      ajax.setRequestHeader('Authorization', _config.token);
      ajax.setRequestHeader('Content-Type', _config.contentType);
      // responseType若不設(shè)置，會(huì)導(dǎo)致下載的文件可能打不開(kāi)
      ajax.responseType = 'blob';
      // 獲取文件下載進(jìn)度
      ajax.addEventListener('progress', (progress) => {
        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
        const msg = `下載進(jìn)度 ${percentage}%...`;
        console.log(msg);
      });
      ajax.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 通過(guò)FileReader去判斷接口返回是json還是文件流
          const fileReader = new FileReader();
          fileReader.onloadend = (e) => {
            if (this.getResponseHeader('content-type').includes('application/json')) {
              const result = JSON.parse(fileReader.result || '{message: 服務(wù)器出現(xiàn)問(wèn)題供嚎，請(qǐng)聯(lián)系管理員}');
              alert(result.message);
            } else {
              // 兩種解碼方式黄娘，區(qū)別自行百度: decodeURIComponent/decodeURI（主要獲取后綴名，否則低版本瀏覽器會(huì)一律識(shí)別為txt克滴，導(dǎo)致下載下來(lái)的都是txt）
              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
              /**
              * Blob.type一個(gè)字符串逼争，表明該 Blob 對(duì)象所包含數(shù)據(jù)的 MIME 類(lèi)型。如果類(lèi)型未知劝赔，則該值為空字符串誓焦。
              * 對(duì)于pdf：type為application/pdf  同時(shí) a標(biāo)簽 不設(shè)置download屬性, 可以直接預(yù)覽
              */
              const blob = new Blob([this.response]);
              const href = URL.createObjectURL(blob);
              downloadEvt(href, _fileName);
              // 釋放一個(gè)之前已經(jīng)存在的、通過(guò)調(diào)用 URL.createObjectURL() 創(chuàng)建的 URL 對(duì)象
              URL.revokeObjectURL(href);
            }
          };
          // 調(diào)用readAsText讀取文件，少了readAsText將不會(huì)觸發(fā)onloadend事件
          fileReader.readAsText(this.response);
        } else {
          alert('服務(wù)器出現(xiàn)問(wèn)題杂伟，請(qǐng)聯(lián)系管理員');
        }
      };
      // send(string): string：僅用于 POST 請(qǐng)求
      ajax.send(queryParams);
    }
  </script>
</body>
  • responseType
    responseType若不設(shè)置移层，會(huì)導(dǎo)致下載的文件可能打不開(kāi)ajax.responseType = 'blob';
  • new FileReader()
    1.文件下載的接口存在返回失敗的情況（例如：服務(wù)器連接不上、接口報(bào)錯(cuò)等）赫粥，對(duì)于下載失敗的情況我們需要在頁(yè)面上彈出失敗提示观话，而不是將失敗信息寫(xiě)進(jìn)文件里等用戶打開(kāi)，這時(shí)候可以使用FileReader去根據(jù)響應(yīng)頭里的content-type判斷接口是否返回成功越平；
    2.如果content-type返回application/json表示文件流返回失敗频蛔，此時(shí)直接在頁(yè)面上彈出失敗信息（圖6-1）；如果是其他格式就認(rèn)為文件流已經(jīng)返回秦叛。
    圖6-1
  • this.getResponseHeader('content-disposition')
    后端返回的文件名稱(chēng)晦溪，主要獲取后綴名，否則某些瀏覽器會(huì)一律識(shí)別為txt挣跋，導(dǎo)致下載下來(lái)的都是txt
    圖6-2
  • new Blob([this.response], {type: '文件類(lèi)型'}) Application Type 對(duì)照表
    1.Blob.type一個(gè)字符串三圆，表明該 Blob 對(duì)象所包含數(shù)據(jù)的 MIME 類(lèi)型。如果類(lèi)型未知避咆，則該值為空字符串嫌术；
    2.對(duì)于pdf：type為application/pdf 同時(shí) a標(biāo)簽 不設(shè)置download屬性(圖6-3), 可以直接預(yù)覽（圖6-4）
    圖6-3

    圖6-4

  • axios中其實(shí)已經(jīng)提供了獲取文件上傳和下載進(jìn)度的事件，這里我使用的是原生ajax（axios雷同牌借，只需要修改請(qǐng)求方法）。


    圖6-5

優(yōu)點(diǎn)

  • 可以下載txt割按、png膨报、pdf等類(lèi)型文件
  • 可以在header中攜帶token做鑒權(quán)操作
  • 可以獲取文件下載進(jìn)度
  • 可以判斷接口是否返回成功

缺點(diǎn)

  • 兼容性問(wèn)題，IE10以下不可用适荣，注意Safari瀏覽器,官網(wǎng)給出
    Safari has a serious issue with blobs that are of the type application/octet-stream
  • 將后端返回的文件流全部獲取后才會(huì)下載

七现柠、ajax下載（Data URL - base64編碼后的url）

<body>
  <button onclick="downLoadAjaxEvt('get', 'http://192.168.66.183:13666/download?name=HAP.pdf')">ajax下載(base64)</button>
  <script>
    function downloadEvt(url, fileName = '未知文件') {
      const el = document.createElement('a');
      el.style.display = 'none';
      el.setAttribute('target', '_blank');
      /**
       * download的屬性是HTML5新增的屬性
       * href屬性的地址必須是非跨域的地址，如果引用的是第三方的網(wǎng)站或者說(shuō)是前后端分離的項(xiàng)目(調(diào)用后臺(tái)的接口)弛矛，這時(shí)download就會(huì)不起作用。
       * 此時(shí)，如果是下載瀏覽器無(wú)法解析的文件背稼，例如.exe,.xlsx..那么瀏覽器會(huì)自動(dòng)下載宫纬，但是如果使用瀏覽器可以解析的文件，比如.txt,.png,.pdf....瀏覽器就會(huì)采取預(yù)覽模式
       * 所以万俗，對(duì)于.txt,.png,.pdf等的預(yù)覽功能我們就可以直接不設(shè)置download屬性(前提是后端響應(yīng)頭的Content-Type: application/octet-stream湾笛，如果為application/pdf瀏覽器則會(huì)判斷文件為 pdf ，自動(dòng)執(zhí)行預(yù)覽的策略)
       */
      fileName && el.setAttribute('download', fileName);
      el.href = url;
      console.log(el);
      document.body.appendChild(el);
      el.click();
      document.body.removeChild(el);
    };

    // 根據(jù)header里的contenteType轉(zhuǎn)換請(qǐng)求參數(shù)
    function transformRequestData(contentType, requestData) {
      requestData = requestData || {};
      if (contentType.includes('application/x-www-form-urlencoded')) {
        // formData格式：key1=value1&key2=value2闰歪，方式二：qs.stringify(requestData, {arrayFormat: 'brackets'}) -- {arrayFormat: 'brackets'}是對(duì)于數(shù)組參數(shù)的處理
        let str = '';
        for (const key in requestData) {
          if (Object.prototype.hasOwnProperty.call(requestData, key)) {
            str += `${key}=${requestData[key]}&`;
          }
        }
        return encodeURI(str.slice(0, str.length - 1));
      } else if (contentType.includes('multipart/form-data')) {
        const formData = new FormData();
        for (const key in requestData) {
          const files = requestData[key];
          // 判斷是否是文件流
          const isFile = files ? files.constructor === FileList || (files.constructor === Array && files[0].constructor === File) : false;
          if (isFile) {
            for (let i = 0; i < files.length; i++) {
              formData.append(key, files[i]);
            }
          } else {
            formData.append(key, files);
          }
        }
        return formData;
      }
      // json字符串{key: value}
      return Object.keys(requestData).length ? JSON.stringify(requestData) : '';
    }
    /**
     * ajax實(shí)現(xiàn)文件下載嚎研、獲取文件下載進(jìn)度
     * @param {String} method - 請(qǐng)求方法get/post
     * @param {String} url
     * @param {Object} [params] - 請(qǐng)求參數(shù)，{name: '文件下載'}
     * @param {Object} [config] - 方法配置
     */
     function downLoadAjaxEvt(method = 'get', url, params, config) {
      const _method = method.toUpperCase();
      const _config = Object.assign({
        contentType: _method === 'GET' ? 'application/x-www-form-urlencoded' : 'application/json',  // 請(qǐng)求頭類(lèi)型
        fileName: '未知文件',                                       // 下載文件名(必填库倘，若為空临扮，下載下來(lái)都是txt格式)
        async: true,                                               // 請(qǐng)求是否異步-true異步论矾、false同步
        token: 'token'                                             // 用戶token
      }, config);

      const queryParams = transformRequestData(_config.contentType, params);
      const _url = `${url}${_method === 'GET' && queryParams ? '?' + queryParams : ''}`;

      const ajax = new XMLHttpRequest();
      ajax.open(_method, _url, _config.async);
      ajax.setRequestHeader('Authorization', _config.token);
      ajax.setRequestHeader('Content-Type', _config.contentType);
      // responseType若不設(shè)置，會(huì)導(dǎo)致下載的文件可能打不開(kāi)
      ajax.responseType = 'blob';
      // 獲取文件下載進(jìn)度
      ajax.addEventListener('progress', (progress) => {
        const percentage = ((progress.loaded / progress.total) * 100).toFixed(2);
        const msg = `下載進(jìn)度 ${percentage}%...`;
        console.log(msg);
      });
      ajax.onload = function () {
        if (this.status === 200 || this.status === 304) {
          // 通過(guò)FileReader去判斷接口返回是json還是文件流
          const fileReader = new FileReader();
          fileReader.readAsDataURL(this.response);
          fileReader.onload = () => {
            if (this.getResponseHeader('content-type').includes('application/json')) {
              alert('服務(wù)器出現(xiàn)問(wèn)題杆勇，請(qǐng)聯(lián)系管理員');
            } else {
              // 兩種解碼方式贪壳，區(qū)別自行百度: decodeURIComponent/decodeURI（主要獲取后綴名，否則某些瀏覽器會(huì)一律識(shí)別為txt靶橱，導(dǎo)致下載下來(lái)的都是txt）
              const _fileName = decodeURIComponent((this.getResponseHeader('content-disposition') || '; filename="未知文件"').split(';')[1].trim().slice(9));
              // 也可以用FileSaver（需提前引入https://github.com/eligrey/FileSaver.js）: saveAs(fileReader.result, _fileName);
              downloadEvt(fileReader.result, _fileName);
            }
          }
        } else {
          alert('服務(wù)器出現(xiàn)問(wèn)題寥袭，請(qǐng)聯(lián)系管理員');
        }
      };
      // send(string): string：僅用于 POST 請(qǐng)求
      ajax.send(queryParams);
    }
  </script>
</body>
  • fileSaver
    網(wǎng)上介紹很多，可以自己百度下

優(yōu)點(diǎn)

  • 可以下載txt关霸、png传黄、pdf等類(lèi)型文件
  • 可以在header中攜帶token做鑒權(quán)操作
  • 可以獲取文件下載進(jìn)度
  • 可以判斷接口是否返回成功

缺點(diǎn)

  • 兼容性問(wèn)題，IE10以下不可用
  • 將后端返回的文件流全部獲取后才會(huì)下載

八队寇、大文件下載注意點(diǎn)

  • fileSaver
    批量下載時(shí)膘掰，總量不超過(guò)2G可以用下這個(gè)，但是每個(gè)瀏覽器允許下載的最大文件不一樣~
    圖8-1
  • ajax下載
    如果后端需要對(duì)下載接口做token鑒權(quán)佳遣，此時(shí)需要使用ajax獲取文件流（第六识埋、七點(diǎn)），可以了解下ajax文件下載原理零渐。
    簡(jiǎn)單來(lái)說(shuō)窒舟，文件下載依賴(lài)瀏覽器特性。前端獲取到服務(wù)器端生成的字節(jié)流诵盼，此時(shí)數(shù)據(jù)是存在于js的內(nèi)存中的惠豺，是不可以直接保存在本地的，利用Blob對(duì)象和window.URL.createObjectURL對(duì)象生成一個(gè)虛擬的URL地址风宁，然后在利用瀏覽器的特性進(jìn)行下載洁墙。
    因此對(duì)于ajax下載大文件時(shí)，會(huì)出現(xiàn)瀏覽器崩潰情況戒财，此時(shí)可以考慮使用鏈接直接下載或使用分片下載
    圖8-2
  • 鏈接下載
    鏈接下載需要后端一邊去下載要打包的文件热监，一邊把打包好的東西寫(xiě)入這個(gè)鏈接。存在的問(wèn)題是饮寞，如果文件很大孝扛，那么這個(gè)鏈接需要一直保持，相當(dāng)于這個(gè)接口一直開(kāi)著沒(méi)有結(jié)束骂际；而且一旦中間出了什么問(wèn)題疗琉，已經(jīng)下載的東西也全部廢了，因此推薦使用分片下載歉铝。

相關(guān)文章

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個(gè)濱河市，隨后出現(xiàn)的幾起案子柠贤，更是在濱河造成了極大的恐慌香浩，老刑警劉巖，帶你破解...
    沈念sama閱讀 207,248評(píng)論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件臼勉，死亡現(xiàn)場(chǎng)離奇詭異邻吭，居然都是意外死亡，警方通過(guò)查閱死者的電腦和手機(jī)宴霸，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,681評(píng)論 2贊 381
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門(mén)囱晴，熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)，“玉大人瓢谢，你說(shuō)我怎么就攤上這事畸写。” “怎么了氓扛？”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,443評(píng)論 0贊 344
  • 道士緝兇錄：失蹤的賣(mài)姜人
    文/不壞的土叔 我叫張陵枯芬，是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我采郎，道長(zhǎng)千所，這世上最難降的妖魔是什么？ 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,475評(píng)論 1贊 279
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蒜埋，我火速辦了婚禮淫痰，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘整份。我一直安慰自己黑界，他們只是感情好，可當(dāng)我...
    茶點(diǎn)故事閱讀 64,458評(píng)論 5贊 374
  • 惡毒庶女頂嫁案：這布局不是一般人想出來(lái)的
    文/花漫 我一把揭開(kāi)白布皂林。 她就那樣靜靜地躺著，像睡著了一般蚯撩。 火紅的嫁衣襯著肌膚如雪础倍。 梳的紋絲不亂的頭發(fā)上，一...
    開(kāi)封第一講書(shū)人閱讀 49,185評(píng)論 1贊 284
  • 城市分裂傳說(shuō)
    那天胎挎，我揣著相機(jī)與錄音沟启，去河邊找鬼。 笑死犹菇，一個(gè)胖子當(dāng)著我的面吹牛德迹，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播揭芍，決...
    沈念sama閱讀 38,451評(píng)論 3贊 401
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開(kāi)眼胳搞，長(zhǎng)吁一口氣：“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼！你這毒婦竟也來(lái)了？” 一聲冷哼從身側(cè)響起肌毅，我...
    開(kāi)封第一講書(shū)人閱讀 37,112評(píng)論 0贊 261
  • 萬(wàn)榮殺人案實(shí)錄
    序言：老撾萬(wàn)榮一對(duì)情侶失蹤筷转，失蹤者是張志新（化名）和其女友劉穎，沒(méi)想到半個(gè)月后悬而，有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體呜舒，經(jīng)...
    沈念sama閱讀 43,609評(píng)論 1贊 300
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,083評(píng)論 2贊 325
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年笨奠，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了袭蝗。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,163評(píng)論 1贊 334
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡般婆，死狀恐怖到腥，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情腺兴，我是刑警寧澤左电，帶...
    沈念sama閱讀 33,803評(píng)論 4贊 323
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站页响，受9級(jí)特大地震影響篓足，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜闰蚕，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,357評(píng)論 3贊 307
  • 男人毒藥：我在死后第九天來(lái)索命
    文/蒙蒙 一栈拖、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧没陡，春花似錦涩哟、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,357評(píng)論 0贊 19
  • 一樁弒父案贴彼，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至埃儿，卻和暖如春器仗，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背童番。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,590評(píng)論 1贊 261
  • 情欲美人皮
    我被黑心中介騙來(lái)泰國(guó)打工精钮， 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人剃斧。 一個(gè)月前我還...
    沈念sama閱讀 45,636評(píng)論 2贊 355
  • 代替公主和親
    正文 我出身青樓轨香，卻偏偏與公主長(zhǎng)得像，于是被迫代替她去往敵國(guó)和親幼东。 傳聞我的和親對(duì)象是個(gè)殘疾皇子臂容，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,925評(píng)論 2贊 344

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