23、document.write 和 innerH

23、document.write 和 innerHTML 的區(qū)別？（必會）

ocument.write 是直接寫入到頁面的內(nèi)容流，如果在寫之前沒有調(diào)用 document.open, 瀏覽器會自動調(diào)用 open。每次寫完關(guān)閉之后重新調(diào)用該函數(shù)，會導(dǎo)致頁面被重寫。

innerHTML 則是 DOM 頁面元素的一個屬性，代表該元素的 html 內(nèi)容。你可以精確到某一個具體的元素來進(jìn)行更改。如果想修改 document 的內(nèi)容，則需要修改。

document.documentElement.innerElement

innerHTML 將內(nèi)容寫入某個 DOM 節(jié)點(diǎn)，不會導(dǎo)致頁面全部重繪。

innerHTML 很多情況下都優(yōu)于 document.write，其原因在于其允許更精確的控制要刷新頁面的那一個部分。

么是OpenAPI、什么是開放平臺？

根據(jù)百度百科的記錄，

在互聯(lián)網(wǎng)時(shí)代，把網(wǎng)站的服務(wù)封裝成一系列計(jì)算機(jī)易識別的數(shù)據(jù)接口開放出去，供第三方開發(fā)者使用，這種行為就叫做Open API，提供開放API的平臺本身就被稱為開放平臺。
百度百科

我們也可以通過一些案例來快速認(rèn)識開放平臺，例如支付寶的開放平臺：

又如抖音開放平臺：

以及微信開放平臺：

總結(jié)下來，開放平臺一般有以下特點(diǎn)：

1、二級域名通常使用open，例如：open.xxx.com

2、使用人群和用戶對象主要是開發(fā)者，因此需要開發(fā)者申請入駐

3、開放平臺核心提供的是OpenAPI，不同開發(fā)者或不同應(yīng)用，擁有不同的接口調(diào)用權(quán)限

4、開放平臺還需要為開發(fā)者用戶提供配套完成的產(chǎn)品功能體系，以便讓開發(fā)者可以在平臺上查看和管理賬號、核心業(yè)務(wù)數(shù)據(jù)，甚至訂單信息

5、需要提供在線的接口文檔，即便是游客也能訪問查看

6、一個賬號可以創(chuàng)建或申請多個應(yīng)用

7、平臺側(cè)，需要有一個內(nèi)部管理后臺，對開發(fā)者賬號、應(yīng)用、API接口權(quán)限、流量統(tǒng)計(jì)等進(jìn)行通用的管理

如何在1天時(shí)間內(nèi)，快速搭建你的OpenAPI和開放平臺？

下面，以接口大師，也就是PhalApi開源框架的專業(yè)版，介紹和分享如何在1在時(shí)間內(nèi)，搭建自己的OpenAPI和開放平臺。

運(yùn)行環(huán)境的要求

接口大師，主要是基于主流的PHP開發(fā)語言+MySQL數(shù)據(jù)庫開發(fā)的，所以技術(shù)很通用。

運(yùn)行環(huán)境要求如下：

操作系統(tǒng)：Windows/Linux/Mac/Ubuntu/CentOS等
開發(fā)語言：PHP 5.3.3 及以上版本，推薦使用PHP 7
數(shù)據(jù)庫：MySQL 5.5 及以上版本
Web服務(wù)器：Nginx/Apache
正式服務(wù)器配置最低配置：CPU 1核 / 內(nèi)存 2G / 硬盤空間40G / 帶寬1M

官方推薦使用：CentOS 7 + PHP 7 + MySQL 5.6 + Nginx

正式的服務(wù)器環(huán)境，建議使用更高配置的服務(wù)器。

安裝

第1步、在獲取到接口大師的源代碼后，將項(xiàng)目源代碼包上傳到服務(wù)器，并進(jìn)行解壓。假設(shè)解壓目錄為：/www/phalapi-pro。

源代碼壓縮包解壓后有：

第2步、進(jìn)行Web服務(wù)器的配置。

如果使用的是Nginx，參考以下Nginx配置，配置好重啟Nginx。

server
{
        listen 80;
        server_name open.phalapi.net;


        index index.html index.php;
        root /www/phalapi-pro/public;


        location ~ .*\.(php|php5)?$
        {
                # fastcgi_pass   127.0.0.1:9000;
                fastcgi_pass unix:/var/run/php-fpm/php-fpm.sock;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
        }




        # 管理后臺
        if (!-e $request_filename) {
            rewrite ^/admin/(.*) /admin/index.html;
        }
        # 開放平臺
        if (!-e $request_filename) {
            rewrite ^/platform/(.*) /platform/index.html;
        }
        # 靜態(tài)資源緩存
        location ~.*\.(js|css|html|png|jpg)$
        {
                expires    3d;
        }
        # 限制上傳的PHP文件，都只能是下載，而非執(zhí)行
        location ~* /uploads/.*\.(php|php5)?$
        {
        }


        access_log /var/log/nginx/open.phalapi.net.access.log;
        error_log /var/log/nginx/open.phalapi.net.error.log;
}

溫馨提示：請把open.phalapi.net換成你自己的域名。

第3步、安裝向?qū)?/span>

安裝地址：http://你的域名/install ，或者打開首頁：http://你的域名/，點(diǎn)擊進(jìn)入安裝向?qū)А?/span>

進(jìn)入安裝向?qū)Ш?，同意安裝。檢測通過后，下一步。

根據(jù)表單，填寫數(shù)據(jù)庫的相關(guān)配置，以及管理員的賬號和密碼。下一步。

溫馨提示：重點(diǎn)修改你的項(xiàng)目名稱、你的數(shù)據(jù)庫連接、管理員登錄密碼。

安裝成功。

開始使用你的開放平臺

成功安裝后，就可以開始使用你的自己的開放平臺了。

訪問開放平臺首頁

默認(rèn)的開放平臺首頁類似如下，你可以根據(jù)自己的需求進(jìn)行二次開發(fā)。

首頁，主要是給游客以及已注冊的用戶訪問和使用的，提供了新手引導(dǎo)和開放平臺介紹的內(nèi)容。

通過頂部菜單，可以看到有以下訪問入口：

首頁
OpenAPI
開放平臺
技術(shù)文檔
管理后臺
語言切換
注冊/登錄

訪問開放平臺

開放平臺是提供給你的開發(fā)者使用的，開發(fā)者可以是內(nèi)部的也可以是外部的，或者第三方開發(fā)者。

當(dāng)開發(fā)者需要使用開放平臺時(shí)，第一件事情是需要注冊新賬號。

注冊成功后，即可登錄：

登錄成功后，即可進(jìn)入開放平臺，進(jìn)行應(yīng)用管理、查看接口權(quán)限、查看流量統(tǒng)計(jì)、提交工單以及開發(fā)者個人中心等。例如在開放平臺的首頁可以看到：我的應(yīng)用、我的訂單、我的套餐、API總數(shù)、接口流量統(tǒng)計(jì)、我的工單等。

訪問OpenAPI

在開放平臺左下方，以及首頁的頂部菜單，都可以明顯看到有OpenAPI接口文檔的入口。這些是開發(fā)者需要重點(diǎn)查看、開發(fā)對接、調(diào)用和依賴的API接口。

進(jìn)入到OpenAPI，可以看到有接口分類頁：

接口搜索頁：

接口詳情頁：

在接口詳情頁，同時(shí)提供了在線接口測試的功能。

訪問內(nèi)部管理后臺

管理后臺，是提供給內(nèi)部管理員使用的，以便對開發(fā)者、應(yīng)用、接口、業(yè)務(wù)數(shù)據(jù)等進(jìn)行全面的管理和維護(hù)。

例如，管理后臺的登錄界面：

為方便區(qū)分，開發(fā)者平臺是藍(lán)色主題，管理后臺是黃色主題。

成功登錄后，可以進(jìn)行管理后臺首頁。

通過左側(cè)菜單，可以看到有很豐富和完善的功能和菜單。

首頁
服務(wù)大廳
賬號管理（開發(fā)者賬號管理，以及管理員賬號）
應(yīng)用管理（開發(fā)者入駐和應(yīng)用申請審核）
接口管理（接口權(quán)限分配）
工單管理
素材庫
配置管理
計(jì)劃任務(wù)
數(shù)據(jù)庫管理
統(tǒng)計(jì)（登錄、開發(fā)者注冊、應(yīng)用匯總、接口流量等統(tǒng)計(jì)）
權(quán)限控制（管理后臺和開放平臺的菜單權(quán)限分配）

如何添加自己的API接口？

在完成接口大師的安裝，以及簡單的認(rèn)識和使用后，就可以根據(jù)自己的需要，基于接口大師進(jìn)行二次開發(fā)，把自己需要開放的滎接口，需要共享的數(shù)據(jù)對外提供給你的開發(fā)者。

下面以Hello World為示例，講解如何快速二次開發(fā)，添加自己的API接口。

創(chuàng)建./src/app/Api/HelloWorld.php文件，并添加以下PHP代碼：

<?php
namespace App\Api;
use App\Common\Api;


/**
 * Hello World示例
 */
class HelloWorld extends Api {


    /**
     * 接口示例
     * @desc 一個開放接口示例，可直接訪問，不需要任何驗(yàn)證，因?yàn)榕渲昧藄ervice_whitelist白名單。熟悉后可刪除此示例接口。
     * @return string content 一句話
     */
    public function say() {
        return array('content'=> 'Hello PhalApi Pro!');
    }
}

這樣就可以手動添加一個自己的新接口了，后面的接口文檔、接口權(quán)限、接口統(tǒng)計(jì)等，都可以由接口大師自動生成。

例如接口分頁會顯示此接口模塊和接口名稱：

Hello World的接口詳情頁：

在開放平臺，開發(fā)者可以看到此接口是否有調(diào)用權(quán)限（由于當(dāng)前開發(fā)者的應(yīng)用未審核通過，所以不具備任何接口的調(diào)用權(quán)限）：

在管理后臺，可以看到此接口的權(quán)限以及進(jìn)行分配：

通過界面，自動生成OpenAPI

接口大師，還有一個亮點(diǎn)和創(chuàng)新的功能，就是可以通過界面，直接自動生成OpenAPI的PHP代碼，甚至連代碼都不需要編寫，就可以生成你的接口或CURD數(shù)據(jù)接口。

只需要填寫接口的類名和方法名，就可以快速生成接口文件的源代碼，保存后，效果就和前面手動編寫接口一樣。非常方便。

小結(jié)和在線演示

可以通過演示賬號，直接登錄，在線體驗(yàn)。

以及接口大師5合1產(chǎn)品矩陣的效果匯總?cè)缦拢?/span>

整體技術(shù)架構(gòu)設(shè)計(jì)

接口大師，整體技術(shù)架構(gòu)設(shè)計(jì)如下：

查看技術(shù)文檔

更多內(nèi)容，請參考接口大師的技術(shù)文檔。http://www.yesx2.com/wiki/#/

PhalApi Pro 2.0 技術(shù)文檔

前言

簡介

安裝

一、使用手冊

1.1 API接口系統(tǒng)使用手冊

1.2 Platform開放平臺使用手冊

1.3 Admin管理后臺使用手冊

二、產(chǎn)品介紹

2.1 整體架構(gòu)及業(yè)務(wù)流程

2.2 賬號體系

2.3 開放接口權(quán)限

2.4 重要項(xiàng)目配置

三、API接口開發(fā)文檔

3.1 接口分類

3.2 在線接口文檔

3.3 如何調(diào)用接口

3.4 如何開發(fā)接口

3.5 接口調(diào)試

3.6 計(jì)劃任務(wù)

3.7 連接其他數(shù)據(jù)庫

3.8 第二套接口驗(yàn)簽方案

四、前端開發(fā)文檔

4.1 Platform開放平臺開發(fā)文檔

4.2 Admin管理后臺開發(fā)文檔

五、附錄

5.1 版本更新日記

5.2 數(shù)據(jù)庫表結(jié)構(gòu)

5.3 聯(lián)系我們

5.4 如何編寫開發(fā)手冊

5.5 文檔編寫規(guī)范

述

.NET的SelectPdf Html到Pdf轉(zhuǎn)換器-社區(qū)版是.NET的SelectPdf庫中提供的功能強(qiáng)大的html到pdf轉(zhuǎn)換器的免費(fèi)版本。
轉(zhuǎn)換器提供了許多強(qiáng)大的選項(xiàng)（將任何網(wǎng)頁轉(zhuǎn)換為pdf，將任何html字符串轉(zhuǎn)換為pdf，html5 / css3 / javascript支持，頁眉和頁腳支持等），唯一的限制是它最多可以生成pdf文檔。5頁長。
.NET的免費(fèi)HTML至Pdf轉(zhuǎn)換器–社區(qū)版功能：最多生成5頁pdf文檔，將任何網(wǎng)頁轉(zhuǎn)換為pdf，將任何原始html字符串轉(zhuǎn)換為pdf，設(shè)置pdf頁面設(shè)置（頁面大小，頁面方向，頁面邊距），在轉(zhuǎn)換過程中調(diào)整內(nèi)容大小以適合pdf頁面，設(shè)置pdf文檔屬性，設(shè)置pdf查看器首選項(xiàng)，設(shè)置pdf安全性（密碼，權(quán)限），設(shè)置轉(zhuǎn)換延遲和網(wǎng)頁導(dǎo)航超時(shí)，自定義頁眉和頁腳，在頁眉中支持html和頁腳，自動和手動分頁符，在每個頁面上重復(fù)html表頭，支持@media類型屏幕和打印，支持內(nèi)部和外部鏈接，基于html元素自動生成書簽，支持HTTP標(biāo)頭，支持HTTP cookie，支持需要身份驗(yàn)證的網(wǎng)頁，支持代理服務(wù)器，啟用/禁用javascript，修改顏色空間，多線程支持，HTML5 / CSS3支持，Web字體支持等等。

代碼實(shí)現(xiàn)

1、nuget 引用

Install-Package Select.HtmlToPdf

2、方法

using SelectPdf;using System.Collections.Specialized;using System.IO;using System.Web;
namespace BQoolCommon.Helpers.File{ public class WebToPdf { public WebToPdf() { //SelectPdf.GlobalProperties.LicenseKey="your-license-key"; }
 /// <summary> /// 將 Html 轉(zhuǎn)成 PDF，並儲存成檔案 /// </summary> /// <param name="html">html</param> /// <param name="fileName">絕對路徑</param> public void SaveToFileByHtml(string html, string fileName) { var doc=SetPdfDocument(html); doc.Save(fileName); }
 /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF，並儲存成檔案 /// </summary> /// <param name="url">url</param> /// <param name="fileName">絕對路徑</param> /// <param name="httpCookies">Cookies</param> public void SaveToFileByUrl(string url, string fileName, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); doc.Save(fileName); }
 /// <summary> /// 將 Html 轉(zhuǎn)成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public byte[] GetFileByteByHtml(string html) { var doc=SetPdfDocument(html); return doc.Save(); }
 /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF，並輸出成 byte[] 格式 /// </summary> /// <param name="url">url</param> /// <param name="httpCookies">Cookies</param> /// <returns></returns> public byte[] GetFileByteByUrl(string url, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); return doc.Save(); }
 /// <summary> /// 將 Html 轉(zhuǎn)成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByHtml(string html) { var doc=SetPdfDocument(html); var pdfStream=new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position=0;
 return pdfStream; }
 /// <summary> /// 傳入 Url 轉(zhuǎn)成 PDF，並輸出成 Stream 格式 /// </summary> /// <param name="html">html</param> /// <returns></returns> public Stream GetFileStreamByUrl(string url, NameValueCollection httpCookies) { var doc=SetPdfDocument(url, httpCookies); var pdfStream=new MemoryStream();
 doc.Save(pdfStream); pdfStream.Position=0;
 return pdfStream; }
 private PdfDocument SetPdfDocument(string html) { var converter=new HtmlToPdf();
 converter.Options.WebPageWidth=1200; html=HttpUtility.HtmlDecode(html);
 return converter.ConvertHtmlString(html); }
 private PdfDocument SetPdfDocument(string url, NameValueCollection httpCookies) { var converter=new HtmlToPdf(); converter.Options.WebPageWidth=1200;
 if (httpCookies != && httpCookies.Count !=0) { converter.Options.HttpCookies.Add(httpCookies); }
 return converter.ConvertUrl(url); }
 }}

3、調(diào)用

/// <summary> /// 下載pdf /// </summary> public void Downpdf(string data) { var stream=new BQoolCommon.Helpers.File.WebToPdf().GetFileStreamByHtml(Gethtml(data)); Response.Clear(); //二進(jìn)制流數(shù)據(jù)（如常見的文件下載） Response.ContentType="application/octet-stream"; //通知瀏覽器下載文件而不是打開 Response.AddHeader("Content-Disposition", "attachment; filename=" + HttpUtility.UrlEncode("Profit and Loss Statement.pdf", System.Text.Encoding.UTF8)); var bytes=StreamToBytes(stream); Response.BinaryWrite(bytes); Response.Flush(); stream.Close(); stream.Dispose();
 Response.End(); }

那么如何獲取指定頁面的html 呢傳入對應(yīng)的model 獲得指定動態(tài)的html

private string Gethtml(string data) { string str="";
 str=this.ControllerContext.RenderViewToString("ProfitDetails", data);
 return str; }

using BQoolCommon.Helpers.Format;using Newtonsoft.Json;using OrdersManager.Models.ViewModel.Report;using System;using System.Collections.Generic;using System.IO;using System.Linq;using System.Web;using System.Web.Mvc;
namespace OrdersManager.Web.Infrastructure{ public static class HelperExtensions { public static string RenderViewToString(this ControllerContext context, string viewName, string data) { if (string.IsOrEmpty(viewName)) viewName=context.RouteData.GetRequiredString("action");
 context.Controller.ViewData.Model=JsonConvert.DeserializeObject<ProfitDetailsmodel>(StringTools.Base64Decode(StringTools.Base64Decode(data)));
 using (var sw=new StringWriter()) { ViewEngineResult viewResult=ViewEngines.Engines.FindPartialView(context, viewName); var viewContext=new ViewContext(context, viewResult.View, context.Controller.ViewData, context.Controller.TempData, sw); try { viewResult.View.Render(viewContext, sw); } catch (Exception ex) { throw; }
 return sw.GetStringBuilder().ToString(); } } }}

參考文檔

https://www.nuget.org/packages/Select.HtmlToPdf/

在線咨詢

上一篇：JavaEE中統(tǒng)一修改http響應(yīng)體內(nèi)容的方法
下一篇：2019 年 JavaScript 調(diào)查報(bào)告出爐

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商