vue v-html動(dòng)態(tài)生成的html怎么加樣式/事件

、動(dòng)態(tài)生成的html，樣式不生效

//html 布局
<view v-html="html">
  {{html}}
 </view>

//動(dòng)態(tài)生成的元素
<view class="btngo" @tap="handleLink(`${ajaxlink}`)" >
  去報(bào)名
</view>	
//然后scoped的.btngo不生效，因?yàn)関-html創(chuàng)建的DOM內(nèi)容不受作用域內(nèi)的樣式影響，
//于是我們?nèi)匀豢梢酝ㄟ^深度作用選擇器來為他們?cè)O(shè)置樣式。
::v-deep {
  .btngo{
    display: inline-block;
    width: 200px;
    height: 44px;
    line-height: 44px;
    background-image: linear-gradient(180deg, #62AFFF 0%, #007BFF 100%);
  }
}

2、動(dòng)態(tài)生成的html，點(diǎn)擊事件不生效

讓我醍醐灌頂?shù)膬煞N解決方法，我選擇了第2種。

1、使用事件委托
2、綁定到外面不動(dòng)態(tài)的元素上等著事件觸發(fā)

pring Boot中，你可能想要基于動(dòng)態(tài)內(nèi)容生成靜態(tài)HTML頁面。有幾種方法可以實(shí)現(xiàn)這一目標(biāo)，以下是其中的一些方法：

使用模板引擎：
你可以使用模板引擎（如Thymeleaf、Freemarker或Velocity）來動(dòng)態(tài)渲染HTML內(nèi)容，并將結(jié)果保存為靜態(tài)文件。例如，你可以創(chuàng)建一個(gè)服務(wù)，該服務(wù)使用模板引擎渲染模板，并將結(jié)果寫入文件。

下面是一個(gè)使用Thymeleaf的簡(jiǎn)單示例：

@Service  
public class StaticHtmlGeneratorService {  

    @Autowired  
    private TemplateEngine templateEngine;  

    @Autowired  
    private ApplicationContext applicationContext;  

    public void generateStaticHtml(String templateName, Map<String, Object> context, String outputPath) {  
        Context thContext = new Context();  
        thContext.setVariables(context);  

        String processedHtml = templateEngine.process(templateName, thContext);  

        try (BufferedWriter writer = new BufferedWriter(new FileWriter(outputPath))) {  
            writer.write(processedHtml);  
        } catch (IOException e) {  
            // Handle exception  
        }  
    }  
}

這段代碼不是完整的實(shí)現(xiàn)，因?yàn)門emplateEngine類并不是Spring Boot標(biāo)準(zhǔn)庫中的一部分。在實(shí)際應(yīng)用中，你會(huì)使用具體的模板引擎的API（例如Thymeleaf的TemplateEngine），并相應(yīng)地調(diào)整代碼。

實(shí)際上，Spring Boot集成Thymeleaf后，你會(huì)這樣使用Thymeleaf的API：

@Autowired  
private SpringTemplateEngine templateEngine;  

public void generateStaticHtml(String templateName, Map<String, Object> contextVars, String outputPath) {  
    Context context = new Context();  
    context.setVariables(contextVars);  

    String processedHtml = templateEngine.process(templateName, context);  

    // Write the processedHtml to a file  
    // ...  
}

使用WebView庫（如Jsoup）：
如果你想在沒有模板引擎的情況下生成HTML，可以使用像Jsoup這樣的庫來構(gòu)建HTML文檔，然后保存為文件。

public void generateStaticHtmlWithJsoup(String title, String bodyContent, String outputPath) throws IOException {  
    Document doc = Jsoup.parse("<html><head><title></title></head><body></body></html>");  
    doc.title(title);  
    doc.body().append(bodyContent);  

    // 美化輸出（Pretty-print）  
    doc.outputSettings().prettyPrint(true);  

    // 寫入文件  
    Files.write(Paths.get(outputPath), doc.outerHtml().getBytes(StandardCharsets.UTF_8));  
}

使用RestTemplate或WebClient：
如果你的靜態(tài)HTML內(nèi)容來自另一個(gè)Web服務(wù)，你可以使用RestTemplate或WebClient來獲取動(dòng)態(tài)內(nèi)容，然后將其保存為靜態(tài)文件。

@Autowired  
private RestTemplate restTemplate;  

public void generateStaticHtmlFromWebService(String url, String outputPath) throws IOException {  
    ResponseEntity<String> response = restTemplate.getForEntity(url, String.class);  

    if (response.getStatusCode() == HttpStatus.OK) {  
        Files.write(Paths.get(outputPath), response.getBody().getBytes(StandardCharsets.UTF_8));  
    }  
}

在生成靜態(tài)HTML時(shí)，請(qǐng)考慮以下幾點(diǎn)：

確保你有適當(dāng)?shù)臋?quán)限來寫入文件系統(tǒng)。
小心處理用戶提供的輸入，以避免安全風(fēng)險(xiǎn)，如跨站腳本（XSS）攻擊。
考慮生成的靜態(tài)文件如何與你的應(yīng)用程序的其他部分（如靜態(tài)資源處理程序）集成。
監(jiān)控文件系統(tǒng)的使用情況，以避免耗盡磁盤空間。
考慮生成的靜態(tài)內(nèi)容的緩存和過期策略。

Java實(shí)現(xiàn)根據(jù)svg模版動(dòng)態(tài)生成圖片

使用場(chǎng)景

需要Java語言動(dòng)態(tài)生成圖片

用流程圖簡(jiǎn)單說明下我這邊工作中使用的場(chǎng)景

僅供參考

所以這里就需要生成證書了

我先給大家看下最終實(shí)現(xiàn)的圖片效果

這里要先說明一下

圖片上的文字都是動(dòng)態(tài)變化的即不同的訂單對(duì)應(yīng)的圖片內(nèi)容都不一樣
圖片上還可以嵌入圖片哦比如上圖的logo圖片

下面說下我是如何解決的

通過PhantomJS來實(shí)現(xiàn)

這種方式是不能實(shí)現(xiàn)這個(gè)需求的

這個(gè)的原理就是對(duì)網(wǎng)頁截圖但只能對(duì)于靜態(tài)頁面截圖不能根據(jù)不同的參數(shù)值動(dòng)態(tài)生成圖片

所以不提倡使用這種方式

但也介紹下這種使用方式朋友們根據(jù)自己的實(shí)際需求情況有選擇的使用

通過html代碼實(shí)現(xiàn)圖片的效果放入web容器(比如nginx)中部署

這是h5代碼

test文件夾下面的內(nèi)容

安裝一個(gè)docker nginx 將test文件夾加載到nginx容器的/usr/share/nginx/html目錄下面

docker run --name nginx80  -p 8000:80  -v /tmp/test:/usr/share/nginx/html -d docker.io/nginx

訪問的頁面效果

訪問該頁面進(jìn)行截圖

這張圖片是截圖生成的圖片但url中的id值并沒有傳給頁面

在h5代碼中請(qǐng)求后端接口獲取數(shù)據(jù)動(dòng)態(tài)顯示出來也是不可以的

所以這種方式使用局限性很窄

簡(jiǎn)單介紹下代碼原理

大致原理是通過http請(qǐng)求該url獲取該url的文件流然后解析h5代碼生成圖片

通過SVG模版動(dòng)態(tài)生成

先寫svg模版（其實(shí)也是h5代碼）

讀取svg模版動(dòng)態(tài)傳入?yún)?shù)生成圖片

其實(shí)現(xiàn)原理大致為讀取svg document h5代碼將動(dòng)態(tài)參數(shù)map解析到h5代碼中轉(zhuǎn)換成字節(jié)數(shù)組生成圖片格式

Linux環(huán)境圖片中文亂碼

我本地是mac系統(tǒng)沒有這個(gè)問題在發(fā)布到測(cè)試環(huán)境linux系統(tǒng)出現(xiàn)了這個(gè)問題

先看下問題的現(xiàn)象

看到了沒生成的圖片中文全是亂碼

原因是因?yàn)閘inux系統(tǒng)沒有中文字體

既然linux系統(tǒng)沒有中文字體那么就安裝它嘛 let's 盤它！！！

先看下mac環(huán)境的字體情況

安裝字體管理工具

brew install fontconfig

查看支持中文

fc-list :lang=zh    (注意‘：’前的空格)

mac環(huán)境默認(rèn)會(huì)安裝很多中文字體

再看下linux環(huán)境

安裝字體管理工具

yum -y install fontconfig

查看支持中文

fc-list :lang=zh

果然沒有中文字體

開始安裝中文字體

將mac環(huán)境的宋體上傳到linux環(huán)境

a 先在mac系統(tǒng)中找到字體安裝目錄

/System/Library/Fonts

b 找到宋體對(duì)應(yīng)的文件

c 將該文件上傳到linux指定的目錄下

/usr/share/fonts/chinese

d 賦予文件夾操作權(quán)限

chmod -R 755 /usr/share/fonts/chinese

e 安裝ttmkfdir來搜索目錄中所有的字體信息，并匯總生成fonts.scale文件

yum -y install ttmkfdir

ttmkfdir -e /usr/share/X11/fonts/encodings/encodings.dir

修改字體配置文件

vi /etc/fonts/fonts.conf
添加
<dir>/usr/share/fonts/chinese</dir>

刷新內(nèi)存中的字體緩存

fc-cache

確認(rèn)是否安裝成功

在jdk中安裝該宋體

a 找到j(luò)dk所在的安裝目錄

echo $JAVA_HOME

b 將宋體文件復(fù)制過來

cp /usr/share/fonts/chinese/STHeiti\ Light.ttc /usr/local/software/jdk1.8.0_141/jre/lib/fonts/fallback

fallback代表存放后備語言的文件夾

重啟java服務(wù)即可

DEMO代碼

https://gitee.com/pingfanrenbiji/resource/tree/master/image

注意: 引入的依賴問題

  <!--phantomjs -->
  <dependency>
   <groupId>org.seleniumhq.selenium</groupId>
   <artifactId>selenium-java</artifactId>
   <version>2.53.1</version>
  </dependency>
  <dependency>
   <groupId>com.github.detro</groupId>
   <artifactId>ghostdriver</artifactId>
   <version>2.1.0</version>
  </dependency>

  <!--svg-->
  <dependency>
   <groupId>com.github.hui.media</groupId>
   <artifactId>svg-core</artifactId>
   <version>2.5</version>
  </dependency>

這些依賴jar包我是上傳到了公司的私服上了

若是朋友們下拉不下來

我提供給大家這些底層jar包的實(shí)現(xiàn)源碼

https://gitee.com/pingfanrenbiji/quick-media

自行上傳到自己的私服即可

在線咨詢

上一篇：HTML5特效之3D旋轉(zhuǎn)圖，雪花飄落
下一篇：HTML ul li 橫排居中排列的方法，三步驟及實(shí)例

您的項(xiàng)目需求

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

整合營銷服務(wù)商