vue v-html動態生成的html怎么加樣式/事件

、動態生成的html，樣式不生效

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

//動態生成的元素
<view class="btngo" @tap="handleLink(`${ajaxlink}`)" >
  去報名
</view>	
//然后scoped的.btngo不生效，因為v-html創建的DOM內容不受作用域內的樣式影響，
//于是我們仍然可以通過深度作用選擇器來為他們設置樣式。
::v-deep {
  .btngo{
    display: inline-block;
    width: 200px;
    height: 44px;
    line-height: 44px;
    background-image: linear-gradient(180deg, #62AFFF 0%, #007BFF 100%);
  }
}

2、動態生成的html，點擊事件不生效

讓我醍醐灌頂的兩種解決方法，我選擇了第2種。

1、使用事件委托
2、綁定到外面不動態的元素上等著事件觸發

pring Boot中，你可能想要基于動態內容生成靜態HTML頁面。有幾種方法可以實現這一目標，以下是其中的一些方法：

使用模板引擎：
你可以使用模板引擎（如Thymeleaf、Freemarker或Velocity）來動態渲染HTML內容，并將結果保存為靜態文件。例如，你可以創建一個服務，該服務使用模板引擎渲染模板，并將結果寫入文件。

下面是一個使用Thymeleaf的簡單示例：

@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  
        }  
    }  
}

這段代碼不是完整的實現，因為TemplateEngine類并不是Spring Boot標準庫中的一部分。在實際應用中，你會使用具體的模板引擎的API（例如Thymeleaf的TemplateEngine），并相應地調整代碼。

實際上，Spring Boot集成Thymeleaf后，你會這樣使用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這樣的庫來構建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：
如果你的靜態HTML內容來自另一個Web服務，你可以使用RestTemplate或WebClient來獲取動態內容，然后將其保存為靜態文件。

@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));  
    }  
}

在生成靜態HTML時，請考慮以下幾點：

確保你有適當的權限來寫入文件系統。
小心處理用戶提供的輸入，以避免安全風險，如跨站腳本（XSS）攻擊。
考慮生成的靜態文件如何與你的應用程序的其他部分（如靜態資源處理程序）集成。
監控文件系統的使用情況，以避免耗盡磁盤空間。
考慮生成的靜態內容的緩存和過期策略。

Java實現根據svg模版動態生成圖片

使用場景

需要Java語言動態生成圖片

用流程圖簡單說明下我這邊工作中使用的場景

僅供參考

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

我先給大家看下最終實現的圖片效果

這里要先說明一下

圖片上的文字都是動態變化的即不同的訂單對應的圖片內容都不一樣
圖片上還可以嵌入圖片哦比如上圖的logo圖片

下面說下我是如何解決的

通過PhantomJS來實現

這種方式是不能實現這個需求的

這個的原理就是對網頁截圖但只能對于靜態頁面截圖不能根據不同的參數值動態生成圖片

所以不提倡使用這種方式

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

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

這是h5代碼

test文件夾下面的內容

安裝一個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

訪問的頁面效果

訪問該頁面進行截圖

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

在h5代碼中請求后端接口獲取數據動態顯示出來也是不可以的

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

簡單介紹下代碼原理

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

通過SVG模版動態生成

先寫svg模版（其實也是h5代碼）

讀取svg模版動態傳入參數生成圖片

其實現原理大致為讀取svg document h5代碼將動態參數map解析到h5代碼中轉換成字節數組生成圖片格式

Linux環境圖片中文亂碼

我本地是mac系統沒有這個問題在發布到測試環境linux系統出現了這個問題

先看下問題的現象

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

原因是因為linux系統沒有中文字體

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

先看下mac環境的字體情況

安裝字體管理工具

brew install fontconfig

查看支持中文

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

mac環境默認會安裝很多中文字體

再看下linux環境

安裝字體管理工具

yum -y install fontconfig

查看支持中文

fc-list :lang=zh

果然沒有中文字體

開始安裝中文字體

將mac環境的宋體上傳到linux環境

a 先在mac系統中找到字體安裝目錄

/System/Library/Fonts

b 找到宋體對應的文件

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

/usr/share/fonts/chinese

d 賦予文件夾操作權限

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>

刷新內存中的字體緩存

fc-cache

確認是否安裝成功

在jdk中安裝該宋體

a 找到jdk所在的安裝目錄

echo $JAVA_HOME

b 將宋體文件復制過來

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

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

重啟java服務即可

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包的實現源碼

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

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

在線咨詢

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

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商