整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          把HTML轉(zhuǎn)成PDF的4個(gè)方案及實(shí)現(xiàn)方法

          本文中,我將展示如何使用 Node.js、Puppeteer、headless Chrome 和 Docker 從樣式復(fù)雜的 React 頁(yè)面生成 PDF 文檔。

          背景:幾個(gè)月前,一個(gè)客戶要求我們開(kāi)發(fā)一個(gè)功能,用戶可以得到 PDF 格式的 React 頁(yè)面內(nèi)容。該頁(yè)面基本上是患者病例的報(bào)告和數(shù)據(jù)可視化結(jié)果,其中包含許多 SVG。另外還有一些特殊的請(qǐng)求來(lái)操縱布局,并對(duì) HTML 元素進(jìn)行一些重新排列。因此與原始的 React 頁(yè)面相比,PDF 中應(yīng)該有不同的樣式和額外的內(nèi)容。

          由于這個(gè)任務(wù)比用簡(jiǎn)單的 CSS 規(guī)則解決要復(fù)雜得多,所以我們先探討了可能的實(shí)現(xiàn)方法。我們找到了 3 個(gè)主要解決方案。這篇博文將指導(dǎo)你了解它們的可能性并最終實(shí)施。

          目錄:

          • 在客戶端還是服務(wù)器端生成?
          • 方案1:從 DOM 制作屏幕截圖
          • 方案2:僅使用 PDF 庫(kù)
          • 最終方案3:Node.js、Puppeteer 和 Headless Chrome
          • 樣式控制
          • 將文件發(fā)送到客戶端并保存
          • 在 Docker 中使用 Puppeteer
          • 方案3 +1:CSS打印規(guī)則
          • 總結(jié)

          在客戶端還是服務(wù)器端生成?

          在客戶端和服務(wù)器端都可以生成PDF文件。但是讓后端處理它可能更有意義,因?yàn)槟悴⒉幌牒谋M用戶瀏覽器可以提供的所有資源。

          即便如此,我仍然會(huì)展示這兩種方法的解決方案。

          方案1:從 DOM 制作屏幕截圖

          乍一看,這個(gè)解決方案似乎是最簡(jiǎn)單的,事實(shí)證明的確是這樣,但它有其自身的局限性。如果你沒(méi)有特殊需求,例如在 PDF 中選擇文本或?qū)ξ谋具M(jìn)行搜索,那么這就是一種簡(jiǎn)單易用的方法。

          此方法簡(jiǎn)單明了:從頁(yè)面創(chuàng)建屏幕截圖,并把它放到 PDF 文件中。非常直截了當(dāng)。我們可以使用兩個(gè)包來(lái)實(shí)現(xiàn):

          • Html2canvas,根據(jù) DOM 生成截圖
          • jsPdf,一個(gè)生成PDF的庫(kù)

          開(kāi)始編碼:

          npm install html2canvas jspdf

          就這樣!

          請(qǐng)注意 html2canvas 的 onclone方法。當(dāng)你在截圖之前需要操縱 DOM(例如隱藏打印按鈕)時(shí),它是非常方便的。我看到過(guò)很多使用這個(gè)包的項(xiàng)目。但不幸的是,這不是我們想要的,因?yàn)槲覀冃枰诤蠖送瓿蓪?duì) PDF 的創(chuàng)建工作。

          方案2:只使用 PDF 庫(kù)

          NPM上有幾個(gè)庫(kù),如 jsPDF(如上所述)或PDFKit。他們的問(wèn)題是,如果我想使用這些庫(kù),我將不得不重新調(diào)整頁(yè)面結(jié)構(gòu)。這肯定會(huì)損害可維護(hù)性,因?yàn)槲倚枰獙⑺泻罄m(xù)更改應(yīng)用到 PDF 模板和 React 頁(yè)面中。

          請(qǐng)看下面的代碼。你需要親自手動(dòng)創(chuàng)建 PDF 文檔。你需要遍歷 DOM 并找出每個(gè)元素并將其轉(zhuǎn)換為 PDF 格式,這是一項(xiàng)繁瑣的工作。必須找到一個(gè)更簡(jiǎn)單的方法。

          這段代碼段來(lái)自 PDFKit 文檔。但是如果你的目標(biāo)是直接生成一個(gè) PDF 文件,而不是對(duì)一個(gè)已經(jīng)存在的(并且不斷變化的)HTML 頁(yè)面進(jìn)行轉(zhuǎn)換,它還是很有用的。

          最終方案3:基于 Node.js 的 Puppeteer 和 Headless Chrome

          什么是 Puppeteer?其文檔中寫(xiě)道:

          Puppeteer 是一個(gè) Node 庫(kù),它提供了一個(gè)高級(jí) API 來(lái)控制 DevTools 協(xié)議上的 Chrome 或 Chromium。 Puppeteer 默認(rèn)以 headless 模式運(yùn)行 Chrome 或 Chromium,但其也可以被配置為完整的(non-headless)模式運(yùn)行。

          它本質(zhì)上是一個(gè)可以從 Node.js 運(yùn)行的瀏覽器。如果你讀過(guò)它的文檔,其中首先提到的就是你可以用 Puppeteer 來(lái)生成頁(yè)面的截圖和PDF。優(yōu)秀!這正是我們想要的。

          先用 npmi i puppeteer 安裝 Puppeteer,并實(shí)現(xiàn)我們的功能。

          這是一個(gè)簡(jiǎn)單的功能,可導(dǎo)航到 URL 并生成站點(diǎn)的 PD F文件。

          首先,我們啟動(dòng)瀏覽器(僅在 headless 模式下支持 PDF 生成),然后打開(kāi)新頁(yè)面,設(shè)置視口,并導(dǎo)航到提供的URL。

          設(shè)置 waitUntil:'networkidle0' 選項(xiàng)意味著當(dāng)至少500毫秒沒(méi)有網(wǎng)絡(luò)連接時(shí),Puppeteer 會(huì)認(rèn)為導(dǎo)航已完成。 (可以從 API docs 獲取更多信息。)

          之后,我們將 PDF 保存為變量,關(guān)閉瀏覽器并返回 PDF。

          注意:page.pdf 方法接收 options 對(duì)象,你可以使用 'path' 選項(xiàng)將文件保存到磁盤(pán)。如果未提供路徑,則 PDF 將不會(huì)被保存到磁盤(pán),而是會(huì)得到緩沖區(qū)。(稍后我將討論如何處理它。)

          如果需要先登錄才能從受保護(hù)的頁(yè)面生成 PDF,首先你要導(dǎo)航到登錄頁(yè)面,檢查表單元素的 ID 或名稱,填寫(xiě)它們,然后提交表單:

          要始終將登錄憑據(jù)保存在環(huán)境變量中,不要硬編碼!

          樣式控制

          Puppeteer 也有這種樣式操作的解決方案。你可以在生成 PDF 之前插入樣式標(biāo)記,Puppeteer 將生成具有已修改樣式的文件。

          await page.addStyleTag({ content: '.nav { display: none} .navbar { border: 0px} #print-button {display: none}' })
          

          將文件發(fā)送到客戶端并保存

          好的,現(xiàn)在你已經(jīng)在后端生成了一個(gè) PDF 文件。接下來(lái)做什么?

          如上所述,如果你不把文件保存到磁盤(pán),將會(huì)得到一個(gè)緩沖區(qū)。你只需要把含有適當(dāng)內(nèi)容類型的緩沖區(qū)發(fā)送到前端即可。

          現(xiàn)在,你只需在瀏覽器向服務(wù)器發(fā)送請(qǐng)求即可得到生成的 PDF。

          一旦發(fā)送了請(qǐng)求,緩沖區(qū)的內(nèi)容就應(yīng)該開(kāi)始下載了。最后一步是將緩沖區(qū)數(shù)據(jù)轉(zhuǎn)換為 PDF 文件。

          就這樣!如果單擊“保存”按鈕,那么瀏覽器將會(huì)保存 PDF。

          在 Docker 中使用 Puppeteer

          我認(rèn)為這是實(shí)施中最棘手的部分 —— 所以讓我?guī)湍愎?jié)省幾個(gè)小時(shí)的百度時(shí)間。

          官方文檔指出*“在 Docker 中使用 headless Chrome 并使其運(yùn)行起來(lái)可能會(huì)非常棘手”*。官方文檔有疑難解答部分,你可以找到有關(guān)用 Docker 安裝 puppeteer 的所有必要信息。

          如果你在 Alpine 鏡像上安裝 Puppeteer,請(qǐng)確保在看到頁(yè)面的這一部分時(shí)再向下滾動(dòng)一點(diǎn)。否則你可能會(huì)忽略一個(gè)事實(shí):你無(wú)法運(yùn)行最新的 Puppeteer 版本,并且你還需要用一個(gè)標(biāo)記禁用 shm :

          const browser = await puppeteer.launch({
           headless: true,
           args: ['--disable-dev-shm-usage']
          });
          

          否則,Puppeteer 子進(jìn)程可能會(huì)在正常啟動(dòng)之前耗盡內(nèi)存。

          方案 3 + 1:CSS 打印規(guī)則

          可能有人認(rèn)為從開(kāi)發(fā)人員的角度來(lái)看,簡(jiǎn)單地使用 CSS 打印規(guī)則很容易。沒(méi)有 NPM 模塊,只有純 CSS。但是在跨瀏覽器兼容性方面,它的表現(xiàn)如何呢?

          在選擇 CSS 打印規(guī)則時(shí),你必須在每個(gè)瀏覽器中測(cè)試結(jié)果,以確保它提供的布局是相同的,并且它不是100%能做到這一點(diǎn)。

          例如,在給定元素后面插入一個(gè) break-after 并不是一個(gè)多么高深的技術(shù),但是你可能會(huì)驚訝的發(fā)現(xiàn)要在 Firefox 中使用它需要使用變通方法。

          除非你是一位經(jīng)驗(yàn)豐富的 CSS 大師,在創(chuàng)建可打印頁(yè)面方面有很多的經(jīng)驗(yàn),否則這可能會(huì)非常耗時(shí)。

          如果你可以使打印樣式表保持簡(jiǎn)單,打印規(guī)則是很好用的。

          讓我們來(lái)看一個(gè)例子吧。

          @media print {
           .print-button {
           display: none;
           }
           
           .content div {
           break-after: always;
           }
          }
          

          上面的 CSS 隱藏了打印按鈕,并在每個(gè) div 之后插入一個(gè)分頁(yè)符,其中包含content 類。有一篇很棒的文章總結(jié)了你可以用打印規(guī)則做什么,以及它們有什么問(wèn)題,包括瀏覽器兼容性。

          考慮到所有因素,如果你想從不那么復(fù)雜的頁(yè)面生成 PDF,CSS打印規(guī)則非常有效。

          總結(jié)

          讓我們快速回顧前面介紹的方案,以便從 HTML 頁(yè)面生成 PDF 文件:

          • 從 DOM 產(chǎn)生截圖:當(dāng)你需要從頁(yè)面創(chuàng)建快照時(shí)(例如創(chuàng)建縮略圖)可能很有用,但是當(dāng)你需要處理大量數(shù)據(jù)時(shí)就會(huì)有些捉襟見(jiàn)肘。
          • 只用 PDF 庫(kù):如果你打算從頭開(kāi)始以編程方式創(chuàng)建 PDF 文件,這是一個(gè)完美的解決方案。否則,你需要同時(shí)維護(hù) HTML 和 PDF 模板,這絕對(duì)是一個(gè)禁忌。
          • Puppeteer:盡管在 Docker 上工作相對(duì)困難,但它為我們的實(shí)現(xiàn)提供了最好的結(jié)果,而且編寫(xiě)代碼也是最簡(jiǎn)單的。
          • CSS打印規(guī)則:如果你的用戶受過(guò)足夠的教育,知道如何把頁(yè)面內(nèi)容打印到文件,并且你的頁(yè)面相對(duì)簡(jiǎn)單,那么它可能是最輕松的解決方案。正如你在我們的案例中所看到的,事實(shí)并非如此。

          雖然今天是愚人節(jié),但是以上所有內(nèi)容都是在真的!

          作者:瘋狂的技術(shù)宅

          鏈接:https://juejin.im/post/5ca1dc0251882543d569e075

          嘍,今天是一篇HTML to PDF速食指南。

          Java 轉(zhuǎn)換 HTML 到PDF有許多類庫(kù),今天我們介紹一下第三方免費(fèi)的類庫(kù)OpenPDF。

          1. OpenPDF

          OpenPDF是免費(fèi)的Java類庫(kù) ,遵從LGPL 和 MPL協(xié)議,所以基本上能夠可以隨意使用。OpenPDF是基于iTEXT的,目前來(lái)說(shuō)也是維護(hù)的比較好的Java操作PDF的開(kāi)源軟件。

          話不多說(shuō),且看所需要的依賴,

          <dependency>    
              <groupId>org.jsoup</groupId>    
              <artifactId>jsoup</artifactId>   
              <version>1.13.1</version> 
          </dependency>
          <dependency>
              <groupId>com.openhtmltopdf</groupId>
              <artifactId>openhtmltopdf-core</artifactId>
              <version>1.0.6</version>
          </dependency>
          <dependency>
              <groupId>com.openhtmltopdf</groupId>
              <artifactId>openhtmltopdf-pdfbox</artifactId>
              <version>1.0.6</version>
          </dependency>
          

          jsoup可以將html文件轉(zhuǎn)換成輸入流等,也可以遍歷html的DOM節(jié)點(diǎn),提取元素及樣式等。

          2. 示例

          本篇示例將以下html文件轉(zhuǎn)換成pdf

          <html>
          <head>
              <style>
                  .center_div {
                      border: 1px solid #404e94;
                      margin-left: auto;
                      margin-right: auto;
                      background-color: #f6d0ed;
                      text-align: left;
                      padding: 8px;
                  }
                  table {
                      width: 100%;
                      border: 1px solid black;
                  }
                  th, td {
                      border: 1px solid black;
                  }
                  body,html,input{font-family:"msyh";}
              </style>
          </head>
          <body>
          <div class="center_div">
              <h1>Hello java North!</h1>
              <div>
                  <p>convert html to pdf.</p>
              </div>
              <div>
                  <table>
                      <thead>
                          <th>ROLE</th>
                          <th>NAME</th>
                          <th>TITLE</th>
                      </thead>
                      <tbody>
                          <tr>
                              <td>MARKSMAN</td>
                              <td>ASHE</td>
                              <td>THE FROST ARCHER</td>
                          </tr>
                          <tr>
                              <td>MAGES</td>
                              <td>ANNIE</td>
                              <td>THE DARK CHILD</td>
                          </tr>
                          <tr>
                              <td>射手</td>
                              <td>凱塔琳</td>
                              <td>皮城女警</td>
                          </tr>
                      </tbody>
                  </table>
              </div>
          </div>
          </body>
          </html>
          

          以上html用瀏覽器打開(kāi)如下,亂碼是因?yàn)橹形淖煮w不識(shí)別,下面轉(zhuǎn)換的時(shí)候會(huì)加載對(duì)應(yīng)的字體來(lái)進(jìn)行轉(zhuǎn)換。

          使用Java轉(zhuǎn)換HTML到PDF代碼如下:

          public class HtmlToPDFOpenSource {
              public static void main(String[] args) throws IOException {
                  HtmlToPDFOpenSource htmlToPDFOpenSource = new HtmlToPDFOpenSource();
                  htmlToPDFOpenSource.generatePdfByOpenhtmltopdf();
              }
          
              private  void generatePdfByOpenhtmltopdf() throws IOException {
                  File inputHtml = new File("E:\\javaNorth\\java-study-note\\javaOpenSource\\src\\main\\resources\\test.html");
          
                  //加載html文件
                  Document document = Jsoup.parse(inputHtml, "UTF-8");
                  document.outputSettings().syntax(Document.OutputSettings.Syntax.html);
                  
                  //引入資源目錄,可以單獨(dú)引入css,圖片文件等
                  String baseUri = FileSystems.getDefault()
                      .getPath("javaOpenSource\\src\\main\\resources")
                      .toUri().toString();
                 
                  try (OutputStream os = new FileOutputStream("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf")) {
                      PdfRendererBuilder builder = new PdfRendererBuilder();
                      builder.withUri("javaOpenSource\\src\\main\\resources\\testOpenLeagueoflegends1.pdf");
                      builder.toStream(os);
                      builder.withW3cDocument(new W3CDom().fromJsoup(document), baseUri);
                      
                      //引入指定字體,注意字體名需要和css樣式中指定的字體名相同
                      builder.useFont(new File("javaOpenSource\\src\\main\\resources\\fonts\\msyh.ttf"),"msyh",1,BaseRendererBuilder.FontStyle.NORMAL, true);
                      builder.run();
                  }
              }
          }
          

          使用Java代碼轉(zhuǎn)換成PDF如下(示例中使用了微軟雅黑中文字體):

          上述html文件中增加如下外部樣式

          <link href="style.css" rel="stylesheet">
          

          并在resources目錄下添加style.css文件,重新生成PDF文件如下。

          3. 總結(jié)

          本片介紹了使用OpenPDF將html文件轉(zhuǎn)換成PDF文件。同時(shí)也使用了自定義字體,外部樣式。但是以下幾點(diǎn)需要格外注意。

          • Java代碼中加載的字體名稱要和HTML引用的CSS樣式中的字體名相同 ({font-family:"msyh";})。
          • HTML文件標(biāo)簽節(jié)點(diǎn)必須閉合(<xxx></xxx>).否則解析會(huì)失敗。

          全部示例在此:https://github.com/javatechnorth/java-study-note/tree/master/javaOpenSource/src/main/java/pdf

          文章來(lái)源:Java技術(shù)指北

          近臨近開(kāi)學(xué)了,大家都在忙著準(zhǔn)備各種學(xué)習(xí)的資料,準(zhǔn)備在新的學(xué)期好好學(xué)習(xí),充實(shí)自己。小編身邊的同學(xué)也是如此,最近,小編的同學(xué)小麗就遇到了一個(gè)很棘手的問(wèn)題。

          她想將一個(gè)網(wǎng)頁(yè)的Python學(xué)習(xí)的教程打印下來(lái),方便自己來(lái)學(xué)習(xí),但是上千頁(yè)的教程,如果通過(guò)手動(dòng)的方式,一個(gè)一個(gè)的去轉(zhuǎn)成pdf并保存到本地,實(shí)在是麻煩的不。

          這就是一個(gè)html轉(zhuǎn)pdf的問(wèn)題,其實(shí)網(wǎng)上有很多不錯(cuò)的html資源,但是苦于學(xué)習(xí)起來(lái),不方便!于是小編就跟小麗保證,這點(diǎn)小事包在我身上。今天,小編就跟分享一下如何用Python把html資料變成pdf。

          01.抓取的學(xué)習(xí)資料

          如今網(wǎng)上的在線學(xué)習(xí)資料可謂是多如牛毛,為了方便講解,小編就利用python3.9.2的中文文檔作為演示的例子,來(lái)將其抓取并保存到本地,其網(wǎng)頁(yè)鏈接如下:

          https://docs.python.org/zh-cn/3.9/tutorial/index.html

          打開(kāi)上述鏈接后,大家會(huì)在網(wǎng)頁(yè)中找到不同內(nèi)容的鏈接地址,包括了基礎(chǔ)的python字符、python語(yǔ)法等內(nèi)容。

          02.獲取網(wǎng)頁(yè)鏈接

          在上圖中,我們需要格外關(guān)注的是紅色方格標(biāo)注的鏈接,每個(gè)鏈接都會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的子網(wǎng)頁(yè)中,而在子網(wǎng)頁(yè)中,就是我們想要保存的內(nèi)容。

          可以看到,上圖中,在python速覽子頁(yè)面中,包含了我們需要提取的文字內(nèi)容。所以將html內(nèi)容保存為pdf的第一步便是獲取到子頁(yè)面的鏈接。由于教程大都是固定內(nèi)容,因此對(duì)于教程的網(wǎng)頁(yè),大都采用的是靜態(tài)頁(yè)面,在網(wǎng)頁(yè)源代碼中可以很輕松地找到子頁(yè)面的網(wǎng)頁(yè)鏈接。

          對(duì)于子網(wǎng)頁(yè)的鏈接抓取,程序如下圖所示:

          程序中,通過(guò)BeautifulSoup庫(kù)來(lái)解析網(wǎng)頁(yè)源代碼,然后提取所有的子頁(yè)面鏈接地址并返回,如果抓取失敗,則直接返回None


          03.html轉(zhuǎn)pdf

          在得到子網(wǎng)頁(yè)的鏈接后,接下來(lái)就是將html的子網(wǎng)頁(yè)保存為pdf文件。小編使用的pdfkit庫(kù),pdfkit庫(kù)可以將網(wǎng)頁(yè)保存為pdf文檔。首先小編來(lái)介紹一下pdfkit庫(kù)的安裝。

          • 下載https://github.com/wkhtmltopdf/packaging/releases/download/0.12.6-1/wkhtmltox-0.12.6-1.mxe-cross-win64.7z 并解壓到本地文件中。(后臺(tái)輸入:pdf) 直接獲取。
          • 將解壓文件中的bin文件路徑添加到系統(tǒng)變量Path中。
          • 執(zhí)行pip install pdfkit
          • 執(zhí)行pip install wkhtmltopdf

          按照上述的操作流程,就可以安裝pdfkit庫(kù)。對(duì)于pdfkit庫(kù)的使用,常見(jiàn)的用法有以下三種:

          上面的程序主要完成以下幾步:

          首先需要指定wkhtmltopdf.exe文件的路徑;

          • 然后分別通過(guò)from_url、from_file和from_string的三種方式來(lái)保存為pdf文件;
          • 需要注意的是,from_file和from_url中的第一個(gè)參數(shù)必須是一個(gè)html的字符串或者是html文檔的列表;
          • 但是小編通過(guò)程序運(yùn)行發(fā)現(xiàn),from_url第一個(gè)參數(shù)只能是html的字符串,不能是html的列表


          因此,pdfkit庫(kù)只能將子網(wǎng)頁(yè)保存為單獨(dú)的pdf文檔,無(wú)法直接通過(guò)pdfkit庫(kù)將所有的子網(wǎng)頁(yè)拼接成一個(gè)完整的pdf文檔,小編通過(guò)PyPDF2庫(kù)中的PdfFileMerger類來(lái)實(shí)現(xiàn)pdf文檔的拼接。程序如下圖所示。

          程序中首先將所有的html網(wǎng)頁(yè)保存為單獨(dú)的pdf文檔,然后通過(guò)PdfFileMerger類對(duì)象來(lái)實(shí)現(xiàn)pdf文檔的拼接。最后就可以得到全部的pdf內(nèi)容。最后我們通過(guò)視頻的展示,來(lái)看一下程序的效果吧。


          除此之外,程序不光可以抓取python3.9的中文文檔,針對(duì)其他的在線文檔,只需要對(duì)獲取網(wǎng)頁(yè)鏈接的程序進(jìn)行修改即可抓取,例如對(duì)于Flask中文文檔的抓取,程序只需要按照下圖進(jìn)行修改,即可將Flask的在線文檔保存為PDF文檔。

          04.總結(jié)

          學(xué)習(xí)Python其實(shí)非常有趣,也很有用。因?yàn)镻ython有大量的現(xiàn)成的庫(kù),可以幫助我們把工作中的很多瑣碎的煩事輕松解決。小編將上述的程序稍加修改,很快就幫阿麗搞定了教程,保存為pdf發(fā)送給了她,小編與女神的關(guān)系更拉近了一步


          主站蜘蛛池模板: 亚洲熟妇无码一区二区三区导航 | 亚洲乱码国产一区三区| 亚洲欧洲一区二区三区| 亚洲一区精品视频在线| 精品福利一区二区三区精品国产第一国产综合精品| 国产精品伦一区二区三级视频| 国产伦精品一区二区三区免.费| 亚洲一区影音先锋色资源| 插我一区二区在线观看| 福利一区在线视频| 丰满爆乳无码一区二区三区| 91精品福利一区二区| 色国产精品一区在线观看| 精品国产免费一区二区三区香蕉| 国产福利电影一区二区三区,亚洲国模精品一区| 亚洲国产系列一区二区三区| 日韩精品无码一区二区三区| 亚洲AV成人一区二区三区AV| 亚洲色无码一区二区三区| 中文字幕精品亚洲无线码一区| 中文字幕一区二区三区在线播放 | 久久久久人妻一区精品果冻| 日本夜爽爽一区二区三区| 国产伦理一区二区三区| 日本视频一区二区三区| 亚洲国产激情一区二区三区 | 国内精品视频一区二区三区八戒| 伊人久久一区二区三区无码 | 精品无码av一区二区三区| 一区二区精品在线| 麻豆文化传媒精品一区二区| 国产精品一区二区久久精品| 亚洲综合色一区二区三区| 蜜芽亚洲av无码一区二区三区| 精品欧美一区二区在线观看| 日韩电影在线观看第一区| 精品亚洲一区二区三区在线播放| 伊人激情AV一区二区三区| 久久精品国产第一区二区三区| 亚洲综合一区无码精品| 搜日本一区二区三区免费高清视频 |